From 101f4f9b78311c8100f3c760cfa074e2fe9bb39c Mon Sep 17 00:00:00 2001 From: Robin van Zanten Date: Thu, 22 Jul 2021 17:24:07 +0200 Subject: [PATCH] feat(menu): add usermenu component --- src/components/UserMenu/UserMenu.module.scss | 42 ++++++ src/components/UserMenu/UserMenu.test.tsx | 13 ++ src/components/UserMenu/UserMenu.tsx | 45 +++++++ .../__snapshots__/UserMenu.test.tsx.snap | 123 ++++++++++++++++++ src/i18n/locales/en_US/menu.json | 3 +- src/screens/User/User.module.scss | 1 + src/stores/UIStore.ts | 2 + 7 files changed, 228 insertions(+), 1 deletion(-) create mode 100644 src/components/UserMenu/UserMenu.module.scss create mode 100644 src/components/UserMenu/UserMenu.test.tsx create mode 100644 src/components/UserMenu/UserMenu.tsx create mode 100644 src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap diff --git a/src/components/UserMenu/UserMenu.module.scss b/src/components/UserMenu/UserMenu.module.scss new file mode 100644 index 000000000..29b696af2 --- /dev/null +++ b/src/components/UserMenu/UserMenu.module.scss @@ -0,0 +1,42 @@ +@use '../../styles/variables'; +@use '../../styles/theme'; + +.panel { + width: 100%; + height: 100%; + padding: variables.$base-spacing 0; + font-weight: normal; + font-size: 16px; + font-style: normal; + line-height: 18px; + letter-spacing: 0.15px; + background: theme.$modal-bg; + box-shadow: theme.$panel-box-shadow; +} + +ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +ul > li > a { + padding: 0 18px; + font-size: 16px; +} + +.button { + margin-bottom: variables.$base-spacing; +} + +.divider { + vertical-align: baseline; + background: transparent; + border: 0; + border-top: 1px solid rgba(variables.$white, 0.12); + + &.inPopover { + margin: variables.$base-spacing; + border-top: 1px solid rgba(255, 255, 255, 0.32); + } +} diff --git a/src/components/UserMenu/UserMenu.test.tsx b/src/components/UserMenu/UserMenu.test.tsx new file mode 100644 index 000000000..d0280c39d --- /dev/null +++ b/src/components/UserMenu/UserMenu.test.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import { render } from '../../testUtils'; + +import UserMenu from './UserMenu'; + +describe('', () => { + test('renders and matches snapshot', () => { + const { container } = render(); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx new file mode 100644 index 000000000..d18c4dece --- /dev/null +++ b/src/components/UserMenu/UserMenu.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import classNames from 'classnames'; + +import AccountCircle from '../../icons/AccountCircle'; +import Favorite from '../../icons/Favorite'; +import BalanceWallet from '../../icons/BalanceWallet'; +import Exit from '../../icons/Exit'; +import MenuButton from '../MenuButton/MenuButton'; + +import styles from './UserMenu.module.scss'; + +type Props = { + inPopover?: boolean; +}; + +const UserMenu = ({ inPopover = false }: Props) => { + const { t } = useTranslation('user'); + + const menuItems = ( +
    +
  • + } /> +
    • +
  • + } /> +
    • +
  • + } /> +
    • +
    +
  • + } /> +
    • +
+ ); + + if (inPopover) { + return ; + } + + return menuItems; +}; + +export default UserMenu; diff --git a/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap new file mode 100644 index 000000000..b84f21841 --- /dev/null +++ b/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap @@ -0,0 +1,123 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders and matches snapshot 1`] = ` +
+ +
+`; diff --git a/src/i18n/locales/en_US/menu.json b/src/i18n/locales/en_US/menu.json index a3ceb1c54..53d307eef 100644 --- a/src/i18n/locales/en_US/menu.json +++ b/src/i18n/locales/en_US/menu.json @@ -1,4 +1,5 @@ { "close_menu": "Close menu", - "open_menu": "Open menu" + "open_menu": "Open menu", + "open_user_menu": "Open user menu" } diff --git a/src/screens/User/User.module.scss b/src/screens/User/User.module.scss index ad9eb0627..b2ffa6266 100644 --- a/src/screens/User/User.module.scss +++ b/src/screens/User/User.module.scss @@ -37,6 +37,7 @@ ul { .button { margin-bottom: variables.$base-spacing; } + .logoutLi { margin-bottom: 0; padding-top: variables.$base-spacing; diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts index 856293ab8..9a0e51497 100644 --- a/src/stores/UIStore.ts +++ b/src/stores/UIStore.ts @@ -4,10 +4,12 @@ type UIStore = { blurImage: string; searchQuery: string; searchActive: boolean; + userMenuOpen: boolean; }; export const UIStore = new Store({ blurImage: '', searchQuery: '', searchActive: false, + userMenuOpen: false, });