WCMS-21904: added drawer functionality to DatasetOverviewTab component

src/components/DatasetOverviewTab/DatasetOverviewTab.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import DatasetOverview from './index';
 import { defaultMetadataMapping } from '../../assets/metadataMapping';
@@ -30,4 +30,22 @@ describe('<DatasetOverview />', () => {
     expect(screen.getByText("69")).toBeInTheDocument();
     expect(screen.getByText("22")).toBeInTheDocument();
   });
+  it("should render Drawer", () => {
+    const metadataMapping = {
+      ...defaultMetadataMapping,
+    }
+
+    render(
+      <MemoryRouter>
+        <DatasetOverview
+          resource={resource}
+          distributions={distribution.distribution}
+          dataset={dataset}
+          metadataMapping={metadataMapping}
+        />
+      </MemoryRouter>
+    )
+    expect(screen.getByText("Metadata Definitions")).toBeInTheDocument();
+    expect(screen.getByText("What do these fields mean?")).toBeInTheDocument();
+  })
 });

src/components/DatasetOverviewTab/data/definitions.json

@@ -0,0 +1,50 @@
+[
+    {
+      "heading": "Modified",
+      "definition": "Most recent date on which the dataset was changed, updated or modified"
+    },
+    {
+      "heading": "Released",
+      "definition": "xxx"
+    },
+    {
+      "heading": "Issued",
+      "definition": "\"Date of formal issuance\" Project Open Data uses label, \"Release\""
+    },
+    {
+      "heading": "Publisher",
+      "definition": "The publishing entity and optionally their parent organization(s)"
+    },
+    {
+      "heading": "Identifier",
+      "definition": "A unique identifier for the dataset or API as maintained within an Agency catalog or database"
+    },
+    {
+      "heading": "Contact",
+      "definition": "Contact name for the asset"
+    },
+    {
+      "heading": "Contact Email",
+      "definition": "Contact name for the asset"
+    },
+    {
+      "heading": "Public Access Level",
+      "definition": "The degree to which this dataset could be made pubicly-available. <br />Choices:<ul><li>public (data asset is or could be made publicly available to all without restrictions),</li><li>restricted public (Data aset is available under certain use restrictions) or non-public (Data asset is not available to members of the public</li><ul>"
+    },
+    { 
+      "heading": "Homepage URL",
+      "definition": "This field is not intended for an agency's homepage (e.g. www.agency.gov) but rather if a datast has a human-friendly hub or landing page that users can be directed to for all resources tied to the dataset"
+    },
+    {
+      "heading": "Bureau Code",
+      "definition": "Federal agencies, combined agency and bureau code from OMB Circular A-11, Appendix C (PDF, CSV in the format of 015:11."
+    },
+    {
+      "heading": "Program Code",
+      "definition": "Federal agencies, list the primary program related to this data asset, from the Federal Program Inventory. Use the format of 015:001."
+    },
+    {
+      "heading": "Tags",
+      "definition": "Tags (or keywords) help users discover your dataset; please include terms that would be used by technical and non-technical users."
+    }
+  ]

src/components/DatasetOverviewTab/index.tsx

@@ -1,13 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { buildRows } from '../DatasetAdditionalInformation';
-import { Table, TableBody, TableRow, TableCell } from '@cmsgov/design-system';
+import { Accordion, AccordionItem, Button, Drawer, InfoCircleIconThin, Table, TableBody, TableRow, TableCell } from '@cmsgov/design-system';
 import Resource from '../Resource';
 import { DatasetOverviewPropsType } from '../../types/dataset';
+import definitions from "./data/definitions.json";
+import DOMPurify from 'dompurify';
 
 const DatasetOverview = ({ dataset, resource, distributions, metadataMapping } : DatasetOverviewPropsType) => {
   const md = useMediaQuery({ minWidth: 0, maxWidth: 768 });
   const rows = buildRows(metadataMapping, dataset);
+  const [drawerOpen, updateOpen] = useState(false);
+
+    const showDrawer = () => {
+      updateOpen(true);
+    };
+
+    const hideDrawer = () => {
+      updateOpen(false);
+    };
+
+    const sortedDefinitions = new Array()
+    rows.forEach( ({ label }) => {
+      definitions.find( item => {
+        if (label === item.heading) {
+          sortedDefinitions.push(item)
+        }
+      })
+    })
+
+    const accordionItems = sortedDefinitions.map( (item, i) => <AccordionItem
+      key={i}
+      defaultOpen
+      heading={item.heading}
+    >
+      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.definition)}} />
+    </AccordionItem>)
 
   return (
     <>
@@ -18,6 +46,20 @@ const DatasetOverview = ({ dataset, resource, distributions, metadataMapping } :
       />
       <div className="dc-c-additional-info-table ds-u-margin-bottom--6 ds-u-padding-left--0 ds-l-lg-col--7 ds-l-md-col--9 ds-l-col--12">
         <h2 className="ds-text-heading--2xl ds-text-heading--2xl">Additional Information</h2>
+        <Drawer
+          onCloseClick={hideDrawer}
+          heading="Metadata Definitions"
+          isOpen={drawerOpen}
+        >
+          <Accordion bordered>
+            {accordionItems}
+          </Accordion>
+        </Drawer>
+        <p className="ds-u-margin-bottom--2">
+          <Button className="ds-c-drawer__toggle" variation="ghost" onClick={showDrawer}>
+            <InfoCircleIconThin className="ds-u-margin-right--1" /> What do these fields mean?
+          </Button>
+        </p>
         <Table compact stackable stackableBreakpoint="md" warningDisabled>
           <TableBody>
             {rows.map((r) => (