Global components (#6)

* Moving components from payments to global.

* Updates for hero.

* Updated font awesome usage.

* removed un-used inverse prop.

package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.js",
   "scripts": {
     "lib:watch": "babel src -d lib --watch",
-    "lib": "npm run clean && babel src -d lib && cp -R src/styles/scss dist/",
+    "lib": "npm run clean && babel src -d lib && cp -R src/styles/scss dist/ && cp -R src/assets lib/",
     "clean": "rm -rf lib && mkdir lib && rm -rf dist && mkdir dist",
     "prepublish": "npm run lib",
     "test": "jest --verbose",

src/components/Hero/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, TextField } from '@cmsgov/design-system';
+
+const Hero = ({title, description, searchUrl}) => {
+  const [searchValue, setSearchValue] = React.useState('');
+  return (
+    <section className={`dc-c-hero ds-base ds-u-padding--2`}>
+      <div className="ds-l-container">
+        <div className="ds-l-row">
+          <h1 className="ds-u-font-size--display ds-u-color--white ds-u-margin-y--1">{title}</h1>
+          <p className="ds-u-color--white ds-u-measure--wide">{description}</p>
+        </div>
+        <div className="ds-l-row ds-u-align-items--stretch ds-u-margin-y--4 ds-u-md-flex-wrap--nowrap ds-u-flex-wrap--wrap">
+          <TextField
+            label="Search by physician, teaching hospital, or company name"
+            labelClassName="ds-u-visibility--screen-reader"
+            name="search_text_input"
+            className="ds-l-col--12 ds-l-md-col--10 ds-u-padding--0 ds-u-md-margin-right--1"
+            onChange={e => setSearchValue(e.target.value)}
+            style={{maxWidth: "none", height: "61px", margin: "0 20px 0 0"}}
+          />
+          <Button href={`${searchUrl}?search=${searchValue}`} className="ds-u-margin-left--auto ds-l-col--12 ds-l-md-col--auto ds-u-margin-top--2 ds-u-md-margin-top--0" variation="default" size="big">
+            Search
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+};
+
+export default Hero;

src/components/NavBar/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import SubMenu from '../SubMenu';
+import NavLink from '../NavLink';
+
+const NavBar = ({ links, menuName, menuId, menuClasses, linkClasses, wrapLabel }) => {
+  return (
+    <nav className={`dc-c-${menuId}-menu`} aria-labelledby={`dc-c-${menuId}-menu--heading`}>
+      <h2 id={`dc-c-${menuId}-menu--heading`} className="ds-u-visibility--screen-reader">{menuName}</h2>
+      <ul className={menuClasses}>
+        {links.map((link) => {
+          if (link.submenu) {
+            return (
+              <SubMenu
+                key={link.id}
+                link={link}
+                wrapLabel={wrapLabel}
+                linkClasses={linkClasses}
+              />
+            )
+          } else {
+            return (
+              <li key={link.id}>
+                <NavLink link={link} className={linkClasses} wrapLabel={wrapLabel} />
+              </li>
+            )
+          }
+        })}
+      </ul>
+    </nav>
+  )
+};
+
+NavBar.defaultProps = {
+  wrapLabel: false,
+}
+
+export default NavBar;

src/components/SearchModal/index.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useMediaQuery } from 'react-responsive'
+import { Button, Dialog, TextField } from '@cmsgov/design-system';
+
+const SearchModal = ({ searchFunc, appNodeId, informationText, buttonSize }) => {
+  const [modalSearchTerm, setModalSearchTerm] = useState('');
+  const [modalSearch, setModalSearch] = useState(false)
+  const mobile = useMediaQuery({ minWidth: 0, maxWidth: 543});
+  return (
+    <>
+      <Button
+        variation="transparent"
+        inversed
+        size={buttonSize}
+        className="ds-u-border--0 dc-c-search-modal--button"
+        onClick={() => setModalSearch(true)}
+      >
+        {mobile ? <span className="ds-u-visibility--screen-reader">Search</span> : <>Search</>}
+      </Button>
+      {modalSearch
+        && (
+          <Dialog
+            className="dc-c-search-dialog"
+            onExit={() => setModalSearch(false)}
+            getApplicationNode={() => document.getElementById(appNodeId)}
+            closeButtonVariation="primary"
+            closeText={<>Close</>}
+          >
+            <p>{informationText}</p>
+            <form className="ds-l-row" onSubmit={searchFunc}>
+              <TextField
+                className="ds-l-sm-col--12 ds-l-lg-col--9"
+                label="Search Term"
+                name="search-modal"
+                labelClassName="ds-u-visibility--screen-reader"
+                onChange={(e) => setModalSearchTerm(e.target.value)}
+              />
+              <Button
+                type="submit"
+                inversed
+              >
+                Search
+              </Button>
+            </form>
+          </Dialog>
+        )}
+    </>
+
+  )
+}
+
+SearchModal.defaultProps = {
+  appNodeId: 'App',
+  buttonSize: ''
+}
+
+export default SearchModal;

src/components/SubMenu/index.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Button } from '@cmsgov/design-system';
+import NavLink from '../NavLink';
+
+const SubMenu = ({link, linkClasses, wrapLabel}) => {
+  const [isExpanded, setIsExapanded] = useState(false);
+  const innerHtml = wrapLabel ? <span>{link.label}</span> : link.label;
+  return (
+    <li
+      className={`has-submenu ${isExpanded ? "open" : ""}`}
+    >
+      <Button
+        size="small"
+        variation="transparent"
+        className={linkClasses}
+        aria-haspopup="true"
+        aria-expanded={isExpanded}
+        onClick={(e) => {e.preventDefault(); setIsExapanded(!isExpanded);}}
+      >
+        {innerHtml}
+      </Button>
+      <ul className="dc-c-site-menu--sub-menu">
+        {link.submenu.map((s) => (
+          <li key={s.id}>
+            <NavLink
+              link={s}
+              wrapLabel={wrapLabel}
+            />
+          </li>
+        ))}
+      </ul>
+    </li>
+  )
+}
+
+
+export default SubMenu;

src/index.js

@@ -4,9 +4,15 @@ export { default as DataTable } from './components/DataTable';
 export { default as DatasetTags } from './components/DatasetTags';
 export { default as DatasetDownloads } from './components/DatasetDownloads';
 export { default as Pagination } from './components/Pagination';
+export { default as Hero } from './components/Hero';
+export { default as NavBar } from './components/NavBar';
+export { default as SearchModal } from './components/SearchModal';
+export { default as SubMenu } from './components/SubMenu';
 
 // Templates
 export { default as Footer } from './templates/Footer';
 export { default as Dataset } from './templates/Dataset';
 export { default as DatasetSearch } from './templates/DatasetSearch';
 export { default as DrupalPage } from './templates/DrupalPage';
+export { default as Header } from './templates/header';
+export { default as MobileHeader } from './templates/mobile_header';

src/styles/scss/templates/footer.scss

@@ -1,7 +1,7 @@
 @import "~@cmsgov/design-system/dist/scss/settings/variables/color";
 
 .dc-c-footer {
-
+  background-color: white;
   ul {
     margin: 0;
     padding: 0;