From f1ac7a0b78ea585595b707fd37f3b42f945cdd9d Mon Sep 17 00:00:00 2001 From: Arctenik <17056247+Arctenik@users.noreply.github.com> Date: Mon, 31 Oct 2022 17:07:00 -0700 Subject: [PATCH 1/3] Add `NavLinkMenu` component (#592) --- .../NavLinkMenu/navLinkMenu.stories.tsx | 69 +++++++++++++++++++ .../NavLinkMenu/navLinkMenu.styles.ts | 15 ++++ .../components/NavLinkMenu/navLinkMenu.tsx | 60 ++++++++++++++++ 3 files changed, 144 insertions(+) create mode 100644 explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.stories.tsx create mode 100644 explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts create mode 100644 explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.tsx diff --git a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.stories.tsx b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.stories.tsx new file mode 100644 index 000000000..ec981f356 --- /dev/null +++ b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.stories.tsx @@ -0,0 +1,69 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { CustomIcon } from "app/components/common/CustomIcon/customIcon"; +import React from "react"; +import { NavLinkMenu } from "./navLinkMenu"; + +export default { + argTypes: { + isGoogle: { control: "array" }, + }, + component: NavLinkMenu, + title: "Components/Navigation/NavLinkMenu", +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const MoreMenu = Template.bind({}); +MoreMenu.args = { + menuItems: [ + { + label: "News", + url: "/news", + }, + { + label: "Events", + url: "/events", + }, + { + label: "Team", + url: "/team", + }, + { + label: "FAQ", + url: "/faq", + }, + ], +}; + +export const FollowUsMenu = Template.bind({}); +FollowUsMenu.args = { + menuItems: [ + { + icon: , + label: "Discourse", + url: "https://help.anvilproject.org/", + }, + { + icon: , + label: "Twitter", + url: "https://twitter.com/useAnVIL", + }, + { + icon: , + label: "Slack", + url: "https://join.slack.com/t/anvil-community/shared_invite/zt-hsyfam1w-LXlCv~3vNLSfDj~qNd5uBg", + }, + { + icon: , + label: "YouTube", + url: "https://www.youtube.com/channel/UCBbHCj7kUogAMFyBAzzzfUw", + }, + { + icon: , + label: "GitHub", + url: "https://github.com/anvilproject", + }, + ], +}; diff --git a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts new file mode 100644 index 000000000..47e1b80bc --- /dev/null +++ b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts @@ -0,0 +1,15 @@ +import styled from "@emotion/styled"; +import { Menu } from "@mui/material"; + +export const NavLinkMenu = styled(Menu)` + .MuiPaper-menu { + margin: 4px 0; + min-width: 144px; + border-color: ${({ theme }) => theme.palette.smoke.main}; + } + + .MuiListItemIcon-root { + min-width: 24px; + color: ${({ theme }) => theme.palette.ink.light}; + } +`; diff --git a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.tsx b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.tsx new file mode 100644 index 000000000..cf5d9f52d --- /dev/null +++ b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.tsx @@ -0,0 +1,60 @@ +import { ListItemIcon, ListItemText, MenuItem } from "@mui/material"; +import { useRouter } from "next/router"; +import React, { MouseEvent, ReactNode, useState } from "react"; +import { NavLinkMenu as Menu } from "./navLinkMenu.styles"; + +export interface MenuItem { + icon?: ReactNode; + label: string; + url: string; +} + +interface Props { + menuItems: MenuItem[]; +} + +export const NavLinkMenu = ({ menuItems }: Props): JSX.Element => { + const router = useRouter(); + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + + const onOpenMenu = (event: MouseEvent): void => { + setAnchorEl(event.currentTarget); + }; + + const onCloseMenu = (): void => { + setAnchorEl(null); + }; + + return ( + <> + + + {menuItems.map(({ icon, label, url }) => ( + { + setAnchorEl(null); + router.push(url); + }} + > + {icon && {icon}} + + {label} + + + ))} + + + ); +}; From b215c37ad171eb7bc16904a16c6f7c5671b2de16 Mon Sep 17 00:00:00 2001 From: Arctenik <17056247+Arctenik@users.noreply.github.com> Date: Tue, 1 Nov 2022 20:19:34 -0700 Subject: [PATCH 2/3] Fix `NavLinkMenu` props and move icon color to theme (#592) --- .../NavLinkMenu/navLinkMenu.stories.tsx | 17 +++++++++++------ .../NavLinkMenu/navLinkMenu.styles.ts | 3 +-- .../components/NavLinkMenu/navLinkMenu.tsx | 5 +++-- explorer/app/theme/definitions.d.ts | 4 ++++ explorer/app/theme/theme.ts | 8 ++++++++ 5 files changed, 27 insertions(+), 10 deletions(-) diff --git a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.stories.tsx b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.stories.tsx index ec981f356..21297340f 100644 --- a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.stories.tsx +++ b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.stories.tsx @@ -5,7 +5,8 @@ import { NavLinkMenu } from "./navLinkMenu"; export default { argTypes: { - isGoogle: { control: "array" }, + menuItems: { control: "array" }, + menuLabel: { control: "text" }, }, component: NavLinkMenu, title: "Components/Navigation/NavLinkMenu", @@ -35,35 +36,39 @@ MoreMenu.args = { url: "/faq", }, ], + menuLabel: "More", }; export const FollowUsMenu = Template.bind({}); FollowUsMenu.args = { menuItems: [ { - icon: , + icon: ( + + ), label: "Discourse", url: "https://help.anvilproject.org/", }, { - icon: , + icon: , label: "Twitter", url: "https://twitter.com/useAnVIL", }, { - icon: , + icon: , label: "Slack", url: "https://join.slack.com/t/anvil-community/shared_invite/zt-hsyfam1w-LXlCv~3vNLSfDj~qNd5uBg", }, { - icon: , + icon: , label: "YouTube", url: "https://www.youtube.com/channel/UCBbHCj7kUogAMFyBAzzzfUw", }, { - icon: , + icon: , label: "GitHub", url: "https://github.com/anvilproject", }, ], + menuLabel: "Follow Us", }; diff --git a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts index 47e1b80bc..0898ee501 100644 --- a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts +++ b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts @@ -9,7 +9,6 @@ export const NavLinkMenu = styled(Menu)` } .MuiListItemIcon-root { - min-width: 24px; - color: ${({ theme }) => theme.palette.ink.light}; + min-width: 24px !important; } `; diff --git a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.tsx b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.tsx index cf5d9f52d..5dfc62596 100644 --- a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.tsx +++ b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.tsx @@ -11,9 +11,10 @@ export interface MenuItem { interface Props { menuItems: MenuItem[]; + menuLabel: string; } -export const NavLinkMenu = ({ menuItems }: Props): JSX.Element => { +export const NavLinkMenu = ({ menuItems, menuLabel }: Props): JSX.Element => { const router = useRouter(); const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); @@ -28,7 +29,7 @@ export const NavLinkMenu = ({ menuItems }: Props): JSX.Element => { return ( <> - + { }, MuiSvgIcon: { styleOverrides: { + colorInkLight: { + color: inkLight, + }, fontSizeLarge: { fontSize: "32px", }, @@ -708,6 +711,11 @@ export const getAppTheme = (customTheme?: ThemeOptions): Theme => { }, }, variants: [ + { + props: { + color: "inkLight", + }, + }, { props: { size: "xsmall", From a1ff3c0680ee7fc18e43524418d343a799c834df Mon Sep 17 00:00:00 2001 From: Arctenik <17056247+Arctenik@users.noreply.github.com> Date: Wed, 2 Nov 2022 20:48:36 -0700 Subject: [PATCH 3/3] Increase selector specificity and remove `!important` (#592) --- .../Header/components/NavLinkMenu/navLinkMenu.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts index 0898ee501..cefc82b41 100644 --- a/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts +++ b/explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts @@ -8,7 +8,7 @@ export const NavLinkMenu = styled(Menu)` border-color: ${({ theme }) => theme.palette.smoke.main}; } - .MuiListItemIcon-root { - min-width: 24px !important; + & .MuiListItemIcon-root { + min-width: 24px; } `;