From cab978faa57d66051c12970aa94d18db584ebe98 Mon Sep 17 00:00:00 2001
From: Ben Whitmore <ben.whitmore0@gmail.com>
Date: Mon, 29 Mar 2021 14:02:47 +1300
Subject: [PATCH] chore(storybook): create first story and fix menu item
styling
---
app/components/Menu.js | 40 ++++++---------------------------
package.json | 1 +
stories/MenuItem.stories.js | 44 +++++++++++++++++++++++++++++++++++++
yarn.lock | 17 ++++++++++++++
4 files changed, 69 insertions(+), 33 deletions(-)
create mode 100644 stories/MenuItem.stories.js
diff --git a/app/components/Menu.js b/app/components/Menu.js
index 163b3be5b6..f461833eea 100644
--- a/app/components/Menu.js
+++ b/app/components/Menu.js
@@ -1,5 +1,5 @@
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;
}
diff --git a/package.json b/package.json
index b9e2799ada..40e847e477 100644
--- a/package.json
+++ b/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",
diff --git a/stories/MenuItem.stories.js b/stories/MenuItem.stories.js
new file mode 100644
index 0000000000..847a2dcdc7
--- /dev/null
+++ b/stories/MenuItem.stories.js
@@ -0,0 +1,44 @@
+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',
+ },
+ },
+}
diff --git a/yarn.lock b/yarn.lock
index b1586ebd1a..d3b0ed28fb 100644
--- a/yarn.lock
+++ b/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"
--
GitLab