From 3ea6750fc64b480ba8ecc158e7897c56f9eb40d0 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 16 Aug 2018 11:08:53 +0300
Subject: [PATCH] feat(stylguide): appbar menu component
---
packages/component-faraday-ui/src/AppBar.md | 57 +++++++-
.../component-faraday-ui/src/AppBarMenu.js | 124 ++++++++++++++++++
.../component-faraday-ui/src/AppBarMenu.md | 18 +++
packages/hindawi-theme/src/elements/Icon.js | 1 +
4 files changed, 196 insertions(+), 4 deletions(-)
create mode 100644 packages/component-faraday-ui/src/AppBarMenu.js
create mode 100644 packages/component-faraday-ui/src/AppBarMenu.md
diff --git a/packages/component-faraday-ui/src/AppBar.md b/packages/component-faraday-ui/src/AppBar.md
index 7c612af2a..7348050a0 100644
--- a/packages/component-faraday-ui/src/AppBar.md
+++ b/packages/component-faraday-ui/src/AppBar.md
@@ -1,15 +1,27 @@
A sticky app bar. For demo purposes it's not fixed to the top at the moment.
```js
+const currentUser = {
+ admin: true,
+ user: {
+ username: 'cocojambo',
+ firstName: 'Alex',
+ lastName: 'Munteanu'
+ }
+};
+
const HindawiLogo = () => <Logo
onClick={() => console.log('Hindawi best publish!')}
title="Hindawi"
src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ca/Hindawi.svg/1200px-Hindawi.svg.png"
/>;
-const MenuComponent = () => <div style={{marginLeft: 8}}>
- MENU
-</div>;
+const MenuComponent = () => <AppBarMenu
+ currentUser={currentUser}
+ goTo={path => console.log(`navigating to ${path}`)}
+ logout={() => console.log('logging out')}
+ />;
+
const AutosaveComponent = () => <div>AUTOSAVE</div>;
<AppBar
@@ -19,7 +31,44 @@ const AutosaveComponent = () => <div>AUTOSAVE</div>;
journal={{
name:'Chemistry Awesomeness',
backgroundImage: 'https://images.hindawi.com/journals/jchem/jchem.banner.jpg'
- }}
+ }}
+ fixed={false}
+ />
+```
+
+Without a journal background.
+
+```js
+const currentUser = {
+ admin: true,
+ user: {
+ username: 'cocojambo',
+ firstName: 'Alex',
+ lastName: 'Munteanu'
+ }
+};
+
+const HindawiLogo = () => <Logo
+ onClick={() => console.log('Hindawi best publish!')}
+ title="Hindawi"
+ src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ca/Hindawi.svg/1200px-Hindawi.svg.png"
+/>;
+
+const MenuComponent = () => <AppBarMenu
+ currentUser={currentUser}
+ goTo={path => console.log(`navigating to ${path}`)}
+ logout={() => console.log('logging out')}
+ />;
+
+const AutosaveComponent = () => <div>AUTOSAVE</div>;
+
+<AppBar
+ autosave={AutosaveComponent}
+ logo={HindawiLogo}
+ menu={MenuComponent}
+ journal={{
+ name:'Chemistry Awesomeness',
+ }}
fixed={false}
/>
```
diff --git a/packages/component-faraday-ui/src/AppBarMenu.js b/packages/component-faraday-ui/src/AppBarMenu.js
new file mode 100644
index 000000000..935917798
--- /dev/null
+++ b/packages/component-faraday-ui/src/AppBarMenu.js
@@ -0,0 +1,124 @@
+import React from 'react'
+import { get } from 'lodash'
+import { Icon } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import {
+ compose,
+ withProps,
+ withHandlers,
+ setDisplayName,
+ withStateHandlers,
+} from 'recompose'
+
+import Text from './Text'
+
+const AppBarMenu = ({
+ goTo,
+ logout,
+ expanded,
+ username,
+ toggleMenu,
+ currentUser,
+}) =>
+ currentUser ? (
+ <Root>
+ <User onClick={toggleMenu}>
+ <Text>{username}</Text>
+ <Icon secondary size={2}>
+ {expanded ? 'chevron-up' : 'chevron-down'}
+ </Icon>
+ </User>
+ {expanded && (
+ <Dropdown>
+ <DropdownOption onClick={goTo('/profile')}>My profile</DropdownOption>
+ {currentUser.admin && (
+ <DropdownOption onClick={goTo('/admin')}>
+ Admin dashboard
+ </DropdownOption>
+ )}
+ <DropdownOption onClick={logout}>Logout</DropdownOption>
+ </Dropdown>
+ )}
+ {expanded && <ToggleOverlay onClick={toggleMenu} />}
+ </Root>
+ ) : null
+
+export default compose(
+ withStateHandlers(
+ { expanded: false },
+ { toggleMenu: ({ expanded }) => () => ({ expanded: !expanded }) },
+ ),
+ withProps(({ currentUser }) => ({
+ username: get(
+ currentUser,
+ 'user.firstName',
+ get(currentUser, 'user.username', 'User'),
+ ),
+ })),
+ withHandlers({
+ goTo: ({ toggleMenu, goTo }) => path => () => {
+ toggleMenu()
+ goTo(path)
+ },
+ logout: ({ logout, toggleMenu }) => () => {
+ toggleMenu()
+ logout()
+ },
+ }),
+ setDisplayName('AppBarMenu'),
+)(AppBarMenu)
+
+// #region styles
+const User = styled.div`
+ align-items: center;
+ display: flex;
+ cursor: pointer;
+`
+const Dropdown = styled.div`
+ background-color: ${th('appBar.colorBackground')};
+ border-radius: ${th('borderRadius')};
+ box-shadow: ${th('boxShadow')};
+
+ position: absolute;
+ top: calc(${th('gridUnit')} * 4);
+ width: calc(${th('gridUnit')} * 18);
+ z-index: 10;
+`
+
+const DropdownOption = styled.div`
+ align-items: center;
+ color: ${th('colorText')};
+ cursor: pointer;
+ display: flex;
+ justify-content: flex-start;
+
+ font-family: ${th('fontHeading')};
+ font-size: ${th('fontSizeBase')};
+ line-height: ${th('lineHeightBase')};
+
+ height: calc(${th('gridUnit')} * 2);
+ padding: ${th('gridUnit')};
+
+ &:hover {
+ background-color: ${th('colorFurniture')};
+ }
+`
+
+const Root = styled.div`
+ align-items: center;
+ display: flex;
+ justify-content: flex-end;
+ margin-left: ${th('gridUnit')};
+ position: relative;
+`
+
+const ToggleOverlay = styled.div`
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ opacity: 0;
+`
+// #endregion
diff --git a/packages/component-faraday-ui/src/AppBarMenu.md b/packages/component-faraday-ui/src/AppBarMenu.md
new file mode 100644
index 000000000..799ab5b7f
--- /dev/null
+++ b/packages/component-faraday-ui/src/AppBarMenu.md
@@ -0,0 +1,18 @@
+App bar user menu.
+
+```js
+const currentUser = {
+ admin: true,
+ user: {
+ username: 'cocojambo',
+ firstName: 'Alex',
+ lastName: 'Munteanu'
+ }
+};
+
+<AppBarMenu
+ currentUser={currentUser}
+ goTo={path => console.log(`navigating to ${path}`)}
+ logout={() => console.log('logging out')}
+ />
+```
diff --git a/packages/hindawi-theme/src/elements/Icon.js b/packages/hindawi-theme/src/elements/Icon.js
index 1eeadbf2c..2251412c6 100644
--- a/packages/hindawi-theme/src/elements/Icon.js
+++ b/packages/hindawi-theme/src/elements/Icon.js
@@ -11,4 +11,5 @@ export default css`
}
}
display: initial;
+ padding-top: 6px;
`
--
GitLab