chore(storybook): create first story and fix menu item styling

app/components/Menu.js

 import React from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import { th, grid, lighten } from '@pubsweet/ui-toolkit'
 import { Link, useLocation } from 'react-router-dom'
@@ -20,20 +20,6 @@ const Root = styled.nav`
 
 const Section = styled.div``
 
-// const Logo = styled.span`
-//   // margin: ${grid(2)} 1rem ${grid(2)} 1rem;
-
-//   ${override('ui.AppBar.Logo')};
-// `
-
-// const LogoLink = styled(Action)`
-//   & > * {
-//     height: calc(${th('gridUnit')} * 6);
-//   }
-
-//   ${override('ui.AppBar.LogoLink')};
-// `
-
 const NavItem = ({ className, link, name, icon }) => (
   <Link className={className} to={link}>
     <Icon>{icon}</Icon>
@@ -48,32 +34,20 @@ NavItem.propTypes = {
   icon: PropTypes.string.isRequired,
 }
 
-const Item = styled(NavItem)`
+export const Item = styled(NavItem)`
   align-items: center;
+  background-color: ${props =>
+    props.active ? th('colorBackgroundHue') : 'unset'};
   border-radius: 10px;
-  color: ${th('colorTextReverse')};
+  color: ${props => (props.active ? th('colorText') : th('colorTextReverse'))};
   display: flex;
   height: ${grid(5)};
   line-height: ${grid(3)};
-
-  ${props =>
-    props.active &&
-    css`
-      background-color: ${lighten('colorBackgroundHue', 0)};
-      color: ${th('colorText')};
-      &:hover {
-        background-color: ${th('colorFurniture')};
-        color: ${th('colorText')};
-      }
-      svg {
-        stroke: ${th('colorText')};
-      }
-    `}
-
   padding-left: ${grid(1)};
 
   svg {
-    stroke: ${th('colorTextReverse')};
+    stroke: ${props =>
+      props.active ? th('colorText') : th('colorTextReverse')};
     width: 1em;
   }
 

package.json

@@ -92,6 +92,7 @@
     "@apollo/client": "3.2.2",
     "@apollo/react-testing": "3.1.4",
     "@babel/core": "7.11.6",
+    "@babel/helper-define-map": "^7.13.12",
     "@guardian/prosemirror-invisibles": "1.2.1",
     "@pubsweet/base-model": "4.0.0",
     "@pubsweet/component-send-email": "0.4.3",

stories/MenuItem.stories.js

+import React from 'react'
+import { ThemeProvider } from 'styled-components'
+import theme from '../app/theme'
+import { Item } from '../app/components/Menu'
+
+export const Base = args => <Item {...args} />
+export const Active = Base.bind()
+export const User = Base.bind()
+export const Users = Base.bind()
+export const CheckSquare = Base.bind()
+
+Base.args = {
+  active: false,
+  link: '#',
+  name: 'Menu item',
+  icon: 'home',
+}
+Active.args = { ...Base.args, active: true }
+User.args = { ...Base.args, icon: 'user' }
+Users.args = { ...Base.args, icon: 'users' }
+CheckSquare.args = { ...Base.args, icon: 'check-square' }
+
+export default {
+  title: 'Menu/Item',
+  component: Item,
+  argTypes: {
+    active: { control: { type: 'boolean' } },
+    link: { control: { type: 'text' } },
+    name: { control: { type: 'text' } },
+    icon: { control: { type: 'text' } },
+  },
+  decorators: [
+    Story => (
+      <ThemeProvider theme={theme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+}

yarn.lock

@@ -274,6 +274,14 @@
     "@babel/helper-annotate-as-pure" "^7.12.13"
     regexpu-core "^4.7.1"
+"@babel/helper-define-map@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.13.12.tgz#4f7a67d164560137a820f3cfe12f142123e66063"
+  integrity sha512-r9/bcpR9n3FHH4Iq9Pz96mvnBbV4D8aDYUW5HjkR8eaQhJmsGshRh1bfOalGKofWOB/3KVFtmLf0iJi7/6Lgfg==
+  dependencies:
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/types" "^7.13.12"
+
 "@babel/helper-define-polyfill-provider@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.5.tgz#3c2f91b7971b9fc11fe779c945c014065dea340e"
@@ -1366,6 +1374,15 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
+"@babel/types@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.12.tgz#edbf99208ef48852acdff1c8a681a1e4ade580cd"
+  integrity sha512-K4nY2xFN4QMvQwkQ+zmBDp6ANMbVNw6BbxWmYA4qNjhR9W+Lj/8ky5MEY2Me5r+B2c6/v6F53oMndG+f9s3IiA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047"