diff --git a/packages/ui/src/molecules/AppBar.js b/packages/ui/src/molecules/AppBar.js index 75fe0d217b5c6ce671bce008f2003d4a11168c34..aa8927f9a2fa66a0d575b88a0d56806f8a66f367 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 b65bb8f39ae81fb2b37a5a11b73fd3850211bf14..15cef803446640e7c64ec4e781cc75d9301ada19 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 6078b044287aa7824d423b274babdc2b00b72863..6e9a7e258f7f1a13c137fa2fb4cc99d8e25dbdf7 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 ca8049e1076c6c77a82a9c4b6e977bdafbdf1264..9068c5a4fa5f3ec3353690fc091f182d0e782426 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: () => {}, }