feat(styleguide): add appbar component

packages/component-faraday-ui/src/AppBar.js

+import React from 'react'
+import { th } from '@pubsweet/ui-toolkit'
+import { H2 } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { compose, setDisplayName } from 'recompose'
+
+const AppBar = ({
+  logo: Logo,
+  menu: Menu,
+  fixed = true,
+  autosave: Autosave,
+  journal: { backgroundImage, name },
+}) => (
+  <Root fixed={fixed}>
+    {backgroundImage && <JournalBackground img={backgroundImage} />}
+    <LogoContainer>
+      <Logo />
+    </LogoContainer>
+    <H2>{name}</H2>
+    <RightContainer>
+      <Autosave />
+      <Menu />
+    </RightContainer>
+  </Root>
+)
+
+AppBar.defaultProps = {
+  autosave: () => <div />,
+  logo: () => <div />,
+  menu: () => <div />,
+}
+
+export default compose(setDisplayName('AppBar'))(AppBar)
+
+// #region styles
+const RightContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height ${th('appBar.height')};
+  margin-right: ${th('gridUnit')};
+  height: ${th('appBar.height')};
+
+  position: absolute;
+  right: 0;
+  top: 0;
+`
+
+const LogoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height ${th('appBar.height')};
+  margin-left: ${th('gridUnit')};
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+`
+
+const JournalBackground = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: ${th('appBar.height')};
+
+  background: ${props =>
+    props.img
+      ? `url(${props.img})
+    center / 100% 60px no-repeat;`
+      : th('appBar.colorBackground')};
+
+  -webkit-mask-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.05),
+    rgba(0, 0, 0, 0.2) 20%,
+    rgba(0, 0, 0, 0.4) 50%,
+    rgba(0, 0, 0, 0.2) 80%,
+    rgba(0, 0, 0, 0.05)
+  );
+`
+
+const Root = styled.div`
+  align-items: center;
+  background-color: ${th('appBar.colorBackground')};
+  box-shadow: ${th('appBar.boxShadow')};
+  height: ${th('appBar.height')};
+  display: flex;
+  justify-content: center;
+  padding: 0 calc(${th('gridUnit')} * 2);
+  position: ${props => (props.fixed ? 'fixed' : 'relative')};
+
+  top: 0;
+  left: 0;
+  right: 0;
+
+  z-index: ${Number.MAX_SAFE_INTEGER};
+
+  ${H2} {
+    z-index: 1;
+  }
+`
+// #endregion

packages/component-faraday-ui/src/AppBar.md

+A sticky app bar. For demo purposes it's not fixed to the top at the moment.
+
+```js
+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 AutosaveComponent = () => <div>AUTOSAVE</div>;
+
+<AppBar
+  autosave={AutosaveComponent}
+  logo={HindawiLogo}
+  menu={MenuComponent}
+  journal={{
+    name:'Chemistry Awesomeness', 
+    backgroundImage: 'https://images.hindawi.com/journals/jchem/jchem.banner.jpg'
+    }}
+  fixed={false}
+  />
+```

packages/component-faraday-ui/src/Logo.js

+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+
+import React from 'react'
+
+const Logo = ({ src, onClick, title, height = 36 }) => (
+  <img alt={title} height={height} onClick={onClick} src={src} title={title} />
+)
+
+export default Logo

packages/component-faraday-ui/src/Logo.md

+A clickable logo. Used for App headers.
+
+```js
+<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"
+/>
+```

packages/component-wizard/src/components/SubmissionWizard.js

@@ -7,7 +7,7 @@ import { actions } from 'pubsweet-client'
 import { withJournal } from 'xpub-journal'
 import { ConnectPage } from 'xpub-connect'
 import { DragDropContext } from 'react-dnd'
-import { Icon, Button } from '@pubsweet/ui'
+import { Icon, Button, Steps } from '@pubsweet/ui'
 import HTML5Backend from 'react-dnd-html5-backend'
 import { selectCollection, selectFragment } from 'xpub-selectors'
 import {
@@ -30,7 +30,7 @@ import {
   getFormSyncErrors,
 } from 'redux-form'
 
-import { Steps, FormItems } from 'pubsweet-components-faraday/src/components'
+import { FormItems } from 'pubsweet-components-faraday/src/components'
 
 import { wizardSteps } from './'
 import {

packages/components-faraday/src/components/AppBar/AppBar.js

@@ -2,9 +2,9 @@ import React from 'react'
 import { get } from 'lodash'
 import { Icon } from '@pubsweet/ui'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { withRouter } from 'react-router-dom'
-import styled, { withTheme } from 'styled-components'
 import { withState, withHandlers, compose } from 'recompose'
 
 import { userNotConfirmed } from 'pubsweet-component-faraday-selectors'
@@ -13,7 +13,6 @@ const AppBar = ({
   goTo,
   user,
   brand,
-  theme,
   expanded,
   toggleMenu,
   currentUser,
@@ -30,11 +29,11 @@ const AppBar = ({
       {user && (
         <User>
           <div onClick={toggleMenu}>
-            <Icon color={theme.colorText}>user</Icon>
+            <Icon secondary>user</Icon>
             <span>
               {get(user, 'firstName') || get(user, 'username') || 'User'}
             </span>
-            <Icon color={theme.colorText}>chevron-down</Icon>
+            <Icon secondary>chevron-down</Icon>
           </div>
           {expanded && (
             <Dropdown>
@@ -65,7 +64,6 @@ const AppBar = ({
 
 export default compose(
   withRouter,
-  withTheme,
   connect(state => ({
     currentUser: get(state, 'currentUser.user'),
     shouldShowConfirmation: userNotConfirmed(state),
@@ -90,10 +88,11 @@ const Root = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  width: 100vw;
 
   position: fixed;
   top: 0;
+  right: 0;
+  left: 0;
   z-index: 10;
 `
 

packages/hindawi-theme/src/index.js

@@ -39,6 +39,12 @@ const hindawiTheme = {
   colorTextPlaceholder: '#595959',
   colorWarning: '#FC6A4B',
 
+  appBar: {
+    colorBackground: '#ffffff',
+    height: '60px',
+    boxShadow: '0 1px 2px 1px #dbdbdb',
+  },
+
   accordion: {
     headerBackgroundColor: '#ffffff',
     backgroundColor: '#f6f6f6',

packages/xpub-faraday/app/FaradayApp.js

@@ -36,14 +36,13 @@ export default compose(
 )(App)
 
 const Root = styled.div`
-  font-family: ${props => props.theme.fontInterface};
+  height: 100%;
   div[open] {
     width: auto;
   }
 `
 
 const MainContainer = styled.div`
-  background-color: ${props => props.theme.backgroundColor || '#fff'};
-  padding: 110px 10px 0 10px;
-  min-height: 100vh;
+  padding-top: 62px;
+  height: 100%;
 `