Update AppBar styling and API

Add prop for injecting main nav links
Expect user object instead of username
Expect logout callback instead of link
Rename brandName prop to brand

packages/ui/src/molecules/AppBar.js

@@ -6,7 +6,7 @@ import Icon from '../atoms/Icon'
 
 const AppBar = ({
   brandLink = '/',
-  brandName,
+  brand,
   loginLink = '/login',
   onLogoutClick,
   navLinks,
@@ -15,9 +15,11 @@ const AppBar = ({
 }) => (
   <nav className={classnames(classes.root, className)}>
     <div className={classes.section}>
-      <Link className={classes.logo} to={brandLink}>
-        {brandName}
-      </Link>
+      {brand && (
+        <Link className={classes.logo} to={brandLink}>
+          {brand}
+        </Link>
+      )}
 
       {navLinks && <div className={classes.navLinks}>{navLinks}</div>}
     </div>

packages/ui/src/molecules/AppBar.local.scss

@@ -26,6 +26,7 @@
 }
 
 .navLinks {
+  align-items: center;
   display: flex;
   margin: 0 1rem;
 

packages/ui/src/molecules/AppBar.md

@@ -4,25 +4,25 @@ It displays the name of the application (as a link to the home page), the
 username of the current user, and a link to sign out.
 
 ```js
-<AppBar brandName="xpub" user={{ username: 'user', admin: true }} />
+<AppBar brand="xpub" user={{ username: 'user', admin: true }} />
 ```
 
 When the user is not signed in, only the login link is displayed.
 
 ```js
-<AppBar brandName="xpub" />
+<AppBar brand="xpub" />
 ```
 
 Can optionally pass navigation links or image for brand.
 
 ```js
 <AppBar
-  brandName={
+  brand={
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="-150 -50 300 350"
+      viewBox="-150 -50 300 300"
       width="50"
-      height="50"
+      height="42"
       fillOpacity="0.5"
     >
       <circle cx="0" cy="50" fill="red" r="100" />

packages/ui/test/AppBar.test.js

@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer'
 import AppBar from '../src/molecules/AppBar'
 
 const baseProps = {
-  brandName: 'some brand',
+  brand: 'some brand',
   onLogoutClick: () => {},
 }