Allow header disclaimer and logo to be skinned

.eslintignore

@@ -9,7 +9,6 @@ static_src/test/server/fixtures/
 /static_src/components/button.jsx
 /static_src/components/confirmation_box.jsx
 /static_src/components/create_service_instance.jsx
-/static_src/components/disclaimer.jsx
 /static_src/components/dropdown.jsx
 /static_src/components/home.jsx
 /static_src/components/login.jsx

static_src/components/header/disclaimer.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { header } from 'skin';
+import { generateId } from '../../util/element_id';
+
+const { disclaimer } = header;
+
+export default class Disclaimer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { expanded: false };
+
+    this.handleClick = this.handleClick.bind(this);
+
+    this.panelId = generateId('header_disclaimer_panel_');
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+
+    this.setState(({ expanded }) => ({ expanded: !expanded }));
+  }
+
+  renderGuidance({ renderIcon, heading, content }) {
+    return (
+      <div className="usa-width-one-half">
+        {renderIcon && renderIcon()}
+        <div className="usa-media_block-body">
+          <p>
+            <strong>{heading}</strong>
+            <br />
+            {content}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      flag,
+      text,
+      linkText,
+      renderToggleIcon,
+      guidance1,
+      guidance2
+    } = disclaimer;
+
+    const { expanded } = this.state;
+    const hidden = !expanded;
+    const panelClass = classNames(
+      'usa-banner-content usa-grid usa-accordion-content',
+      {
+        hide: hidden
+      }
+    );
+
+    return (
+      <div className="usa-banner usa-disclaimer disclaimer-no_sidebar">
+        <header className="grid">
+          <span className="usa-disclaimer-official">
+            {text}
+            {flag && <img {...flag} />}
+            <a
+              className="action action-link action-secondary"
+              aria-expanded={expanded}
+              aria-controls={this.panelId}
+              onClick={this.handleClick}
+            >
+              <span className="p1">{linkText}</span>
+              {renderToggleIcon({ expanded })}
+            </a>
+          </span>
+        </header>
+        <div className={panelClass} id={this.panelId} aria-hidden={hidden}>
+          {this.renderGuidance(guidance1)}
+          {this.renderGuidance(guidance2)}
+        </div>
+      </div>
+    );
+  }
+}

static_src/components/header/header.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { header } from 'skin';
+import LoginStore from '../../stores/login_store.js';
+import HeaderLink from './header_link';
+import Action from '../action.jsx';
+
+const Header = () => {
+  const loginLink = LoginStore.isLoggedIn() ? (
+    <HeaderLink>
+      <Action href="/logout" label="Log out" type="outline">
+        Log out
+      </Action>
+    </HeaderLink>
+  ) : (
+    <HeaderLink>
+      <Action href="/handshake" label="Login" type="outline">
+        Login
+      </Action>
+    </HeaderLink>
+  );
+
+  return (
+    <header className={classNames('header', 'header-no_sidebar')}>
+      <div className="header-wrap">
+        {header.logo.render()}
+        <nav className="header-side">
+          <ul className="nav">
+            {header.links.map((l, i) => (
+              <HeaderLink key={i} url={l.url} text={l.text} />
+            ))}
+            {loginLink}
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

static_src/components/header/header_link.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const propTypes = {
+  children: PropTypes.any,
+  url: PropTypes.string,
+  text: PropTypes.string,
+  classes: PropTypes.array.isRequired
+};
+
+const defaultProps = {
+  classes: []
+};
+
+const HeaderLink = ({ children, url, text, classes }) => (
+  <li className="nav-link">
+    {children || (
+      <a href={url} className={classNames(classes)}>
+        {text}
+      </a>
+    )}
+  </li>
+);
+
+HeaderLink.propTypes = propTypes;
+
+HeaderLink.defaultProps = defaultProps;
+
+export default HeaderLink;

static_src/components/header/index.js

@@ -0,0 +1 @@
+export { default } from './header';

static_src/components/main_container.jsx

@@ -2,10 +2,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import userProvider from './user_provider.jsx';
-import Disclaimer from './disclaimer.jsx';
+import Disclaimer from './header/disclaimer';
 import Footer from './footer.jsx';
 import GlobalErrorContainer from './global_error_container.jsx';
-import Header from './header.jsx';
+import Header from './header';
 import LoginStore from '../stores/login_store.js';
 import OrgStore from '../stores/org_store.js';
 import SpaceStore from '../stores/space_store.js';