diff --git a/src/frontend/apps/e2e/__tests__/app-impress/menu.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/menu.spec.ts deleted file mode 100644 index 1053882a..00000000 --- a/src/frontend/apps/e2e/__tests__/app-impress/menu.spec.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { expect, test } from '@playwright/test'; - -import { keyCloakSignIn } from './common'; - -test.beforeEach(async ({ page, browserName }) => { - await page.goto('/'); - await keyCloakSignIn(page, browserName); -}); - -test.describe('Menu', () => { - const menuItems = [{ name: 'Pad', isDefault: true }]; - for (const { name, isDefault } of menuItems) { - test(`checks that ${name} menu item is displaying correctly`, async ({ - page, - }) => { - const menu = page.locator('menu').first(); - - const buttonMenu = menu.getByLabel(`${name} button`); - await expect(buttonMenu).toBeVisible(); - await buttonMenu.hover(); - await expect(menu.getByLabel('tooltip')).toHaveText(name); - - // Checks the tooltip is with inactive color - await expect(menu.getByLabel('tooltip')).toHaveCSS( - 'background-color', - isDefault ? 'rgb(255, 255, 255)' : 'rgb(22, 22, 22)', - ); - - await buttonMenu.click(); - - // Checks the tooltip has active color - await buttonMenu.hover(); - await expect(menu.getByLabel('tooltip')).toHaveCSS( - 'background-color', - 'rgb(255, 255, 255)', - ); - }); - - test(`checks that ${name} menu item is routing correctly`, async ({ - page, - }) => { - await expect( - page.getByRole('button', { - name: 'Create a new pad', - }), - ).toBeVisible(); - - const menu = page.locator('menu').first(); - - const buttonMenu = menu.getByLabel(`${name} button`); - await buttonMenu.click(); - - /* eslint-disable playwright/no-conditional-expect */ - /* eslint-disable playwright/no-conditional-in-test */ - if (isDefault) { - await expect( - page.getByRole('button', { - name: 'Create a new pad', - }), - ).toBeVisible(); - } else { - await expect( - page.getByRole('button', { - name: 'Create a new pad', - }), - ).toBeHidden(); - - const reg = new RegExp(name.toLowerCase()); - await expect(page).toHaveURL(reg); - } - /* eslint-enable playwright/no-conditional-expect */ - /* eslint-enable playwright/no-conditional-in-test */ - }); - } -}); diff --git a/src/frontend/apps/impress/src/features/menu/Menu.tsx b/src/frontend/apps/impress/src/features/menu/Menu.tsx deleted file mode 100644 index ea265242..00000000 --- a/src/frontend/apps/impress/src/features/menu/Menu.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { Box } from '@/components/'; -import useCunninghamTheme from '@/cunningham/useCunninghamTheme'; - -import MenuItem from './MenuItems'; -import IconPad from './assets/icon-pad.svg'; - -export const Menu = () => { - const { colorsTokens } = useCunninghamTheme(); - const { t } = useTranslation(); - - return ( - - - - - - ); -}; diff --git a/src/frontend/apps/impress/src/features/menu/MenuItems.tsx b/src/frontend/apps/impress/src/features/menu/MenuItems.tsx deleted file mode 100644 index 4421c9f8..00000000 --- a/src/frontend/apps/impress/src/features/menu/MenuItems.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { usePathname } from 'next/navigation'; -import React, { useRef, useState } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { Box, BoxButton, StyledLink } from '@/components'; -import { useCunninghamTheme } from '@/cunningham'; -import { SVGComponent } from '@/types/components'; - -import { Tooltip } from './Tooltip'; - -interface MenuItemProps { - Icon: SVGComponent; - label: string; - href: string; - alias?: string[]; -} - -const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => { - const { t } = useTranslation(); - const pathname = usePathname(); - const { colorsTokens } = useCunninghamTheme(); - const parentRef = useRef(null); - const [isTooltipOpen, setIsTooltipOpen] = useState(false); - - const isActive = - pathname === href || - alias?.includes(pathname) || - pathname.startsWith(`${href}/`) || - alias?.some((a) => pathname.startsWith(`${a}/`)); - - const { color, background, colorTooltip, backgroundTooltip } = isActive - ? { - color: colorsTokens()['primary-600'], - background: colorsTokens()['primary-300'], - backgroundTooltip: 'white', - colorTooltip: 'black', - } - : { - color: '#ffffff55', - background: undefined, - backgroundTooltip: '#161616', - colorTooltip: 'white', - }; - - return ( - setIsTooltipOpen(true)} - onMouseLeave={() => setIsTooltipOpen(false)} - style={{ display: 'block' }} - > - button { padding: 0}; - transition: all 0.2s ease-in-out - `} - $background={background} - $radius="10px" - > - - - - - {isTooltipOpen && ( - - )} - - ); -}; - -export default MenuItem; diff --git a/src/frontend/apps/impress/src/features/menu/Tooltip.tsx b/src/frontend/apps/impress/src/features/menu/Tooltip.tsx deleted file mode 100644 index 77da07f6..00000000 --- a/src/frontend/apps/impress/src/features/menu/Tooltip.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Popover } from '@openfun/cunningham-react'; -import React, { CSSProperties, useEffect, useState } from 'react'; - -import { Box, Text } from '@/components/'; - -interface TooltipProps { - parentRef: React.MutableRefObject; - textColor: CSSProperties['color']; - backgroundColor: CSSProperties['color']; - label: string; -} - -export const Tooltip = ({ - parentRef, - backgroundColor, - textColor, - label, -}: TooltipProps) => { - const [opacity, setOpacity] = useState(0); - - useEffect(() => { - setOpacity(1); - }, []); - - return ( - ''} borderless> - - - {label} - - - - ); -}; diff --git a/src/frontend/apps/impress/src/features/menu/assets/icon-pad.svg b/src/frontend/apps/impress/src/features/menu/assets/icon-pad.svg deleted file mode 100644 index 4ba7bd62..00000000 --- a/src/frontend/apps/impress/src/features/menu/assets/icon-pad.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - diff --git a/src/frontend/apps/impress/src/features/menu/index.ts b/src/frontend/apps/impress/src/features/menu/index.ts deleted file mode 100644 index 629d3d0a..00000000 --- a/src/frontend/apps/impress/src/features/menu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Menu'; diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx index 39638e6f..cd39d211 100644 --- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx +++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx @@ -1,13 +1,11 @@ import { Box } from '@/components'; import { HEADER_HEIGHT, Header } from '@/features/header'; -import { Menu } from '@/features/menu'; export function MainLayout({ children }: { children: React.ReactNode }) { return (
- {children}