From 570bbfb52db27d59fb192881ddf97373c03534d7 Mon Sep 17 00:00:00 2001
From: Tamlyn Rhodes <tamlyn@tamlyn.org>
Date: Fri, 12 Jan 2018 10:21:25 +0000
Subject: [PATCH] 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 | 10 ++++++----
packages/ui/src/molecules/AppBar.local.scss | 1 +
packages/ui/src/molecules/AppBar.md | 10 +++++-----
packages/ui/test/AppBar.test.js | 2 +-
4 files changed, 13 insertions(+), 10 deletions(-)
diff --git a/packages/ui/src/molecules/AppBar.js b/packages/ui/src/molecules/AppBar.js
index 75fe0d217..aa8927f9a 100644
--- a/packages/ui/src/molecules/AppBar.js
+++ b/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>
diff --git a/packages/ui/src/molecules/AppBar.local.scss b/packages/ui/src/molecules/AppBar.local.scss
index b65bb8f39..15cef8034 100644
--- a/packages/ui/src/molecules/AppBar.local.scss
+++ b/packages/ui/src/molecules/AppBar.local.scss
@@ -26,6 +26,7 @@
}
.navLinks {
+ align-items: center;
display: flex;
margin: 0 1rem;
diff --git a/packages/ui/src/molecules/AppBar.md b/packages/ui/src/molecules/AppBar.md
index 6078b0442..6e9a7e258 100644
--- a/packages/ui/src/molecules/AppBar.md
+++ b/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" />
diff --git a/packages/ui/test/AppBar.test.js b/packages/ui/test/AppBar.test.js
index ca8049e10..9068c5a4f 100644
--- a/packages/ui/test/AppBar.test.js
+++ b/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: () => {},
}
--
GitLab