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 @@
+[
+    {
+      "pdc": "Modified",
+      "definition": "Most recent date on which the dataset was changed, updated or modified"
+    },
+    {
+      "pdc": "Released",
+      "definition": "xxx"
+    },
+    {
+      "pdc": "Issued",
+      "definition": "Dare of formal issuance\" Project Open Data uses lable \"Release"
+    },
+    {
+      "pdc": "Publisher",
+      "definition": "The publishing entity and optionally their parent organization(s)"
+    },
+    {
+      "pdc": "Identifier",
+      "definition": "A unique identifier for the dataset or API as maintained within an Agency catalog or database"
+    },
+    {
+      "pdc": "Contact",
+      "definition": "Contact name for the asset"
+    },
+    {
+      "pdc": "Contact Email",
+      "definition": "Contact name for the asset"
+    },
+    {
+      "pdc": "Public Access Level",
+      "definition": "The degree to which this dataset could be made pubicly-available. \nChoices:\npublic (data asset is or could be made publicly available to all without restrictions), \nrestricted public (Data aset is available under certain use restrictions) or \nnon-public (Data asset is not available to members of the public"
+    },
+    {
+      "pdc": "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"
+    },
+    {
+      "pdc": "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."
+    },
+    {
+      "pdc": "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."
+    },
+    {
+      "pdc": "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,31 @@
-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";
 
 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 accordionItems = definitions.map( ({ pdc, definition }, i) => <AccordionItem
+      key={i}
+      defaultOpen
+      heading={pdc}
+    >
+      <p>{definition}</p>
+    </AccordionItem>)
 
   return (
     <>
@@ -18,6 +36,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) => (