From 2b4fdbc8581cf90d1c77c0d483689364510a99d3 Mon Sep 17 00:00:00 2001 From: sirineJ <112706079+sirineJ@users.noreply.github.com> Date: Tue, 21 Jan 2025 23:57:15 +0100 Subject: [PATCH] remove deprecated prop profileMenu from TopNavigation --- .changeset/angry-ears-train.md | 5 + .../TopNavigation/TopNavigation.spec.tsx | 24 --- .../TopNavigation/TopNavigation.stories.tsx | 26 ---- .../TopNavigation/TopNavigation.tsx | 16 -- .../ProfileMenu/ProfileMenu.module.css | 57 ------- .../ProfileMenu/ProfileMenu.spec.tsx | 87 ----------- .../components/ProfileMenu/ProfileMenu.tsx | 141 ------------------ .../components/ProfileMenu/index.ts | 18 --- 8 files changed, 5 insertions(+), 369 deletions(-) create mode 100644 .changeset/angry-ears-train.md delete mode 100644 packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.module.css delete mode 100644 packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.spec.tsx delete mode 100644 packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx delete mode 100644 packages/circuit-ui/components/TopNavigation/components/ProfileMenu/index.ts diff --git a/.changeset/angry-ears-train.md b/.changeset/angry-ears-train.md new file mode 100644 index 0000000000..d6a854a7f1 --- /dev/null +++ b/.changeset/angry-ears-train.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": minor +--- + +Removed the deprecated `profileMenu` and `user` props from the TopNavigation component. diff --git a/packages/circuit-ui/components/TopNavigation/TopNavigation.spec.tsx b/packages/circuit-ui/components/TopNavigation/TopNavigation.spec.tsx index 7b9bd59c2a..7f3472324f 100644 --- a/packages/circuit-ui/components/TopNavigation/TopNavigation.spec.tsx +++ b/packages/circuit-ui/components/TopNavigation/TopNavigation.spec.tsx @@ -17,7 +17,6 @@ import { describe, expect, it, vi } from 'vitest'; import { Shop, SumUpLogo } from '@sumup-oss/icons'; import { axe, render, screen } from '../../util/test-utils.js'; -import type { PopoverProps } from '../Popover/index.js'; import { TopNavigation, type TopNavigationProps } from './TopNavigation.js'; @@ -39,29 +38,6 @@ describe('TopNavigation', () => { activeLabel: 'Close menu', inactiveLabel: 'Open menu', }, - user: { - name: 'Jane Doe', - id: 'ID: AC3YULT8', - }, - profileMenu: { - label: 'Open profile menu', - actions: [ - { - onClick: vi.fn(), - children: 'View profile', - }, - { - onClick: vi.fn(), - children: 'Settings', - }, - { type: 'divider' }, - { - onClick: vi.fn(), - children: 'Logout', - destructive: true, - }, - ] as PopoverProps['actions'], - }, links: [ { icon: Shop, diff --git a/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx b/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx index 0d4d67d08d..1e1da75ca3 100644 --- a/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx +++ b/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx @@ -90,32 +90,6 @@ export const baseArgs: TopNavigationProps = { ), - user: { - name: 'Jane Doe', - id: 'ID: AC3YULT8', - }, - profileMenu: { - label: 'Open profile menu', - actions: [ - { - href: '/profile', - onClick: action('View profile'), - children: 'View profile', - }, - { - href: '/settings', - onClick: action('Settings'), - children: 'Settings', - }, - { type: 'divider' }, - { - onClick: action('Logout'), - children: 'Logout', - destructive: true, - }, - ], - className: 'custom-class-name', - }, links: [ { key: 'custom', diff --git a/packages/circuit-ui/components/TopNavigation/TopNavigation.tsx b/packages/circuit-ui/components/TopNavigation/TopNavigation.tsx index ba00e656f8..62a3363ecd 100644 --- a/packages/circuit-ui/components/TopNavigation/TopNavigation.tsx +++ b/packages/circuit-ui/components/TopNavigation/TopNavigation.tsx @@ -23,15 +23,10 @@ import { clsx } from '../../styles/clsx.js'; import { utilClasses } from '../../styles/utility.js'; import { SkipLink } from '../SkipLink/index.js'; -import { - ProfileMenu, - type ProfileMenuProps, -} from './components/ProfileMenu/index.js'; import { UtilityLinks, type UtilityLinksProps, } from './components/UtilityLinks/index.js'; -import type { UserProps } from './types.js'; import classes from './TopNavigation.module.css'; /** @@ -44,14 +39,6 @@ export interface TopNavigationProps HTMLAttributes { logo: ReactNode; hamburger?: HamburgerProps; - /** - * @deprecated Use a custom component in the `links` prop instead. - */ - profileMenu?: Omit; - /** - * @deprecated Use a custom component in the `links` prop instead. - */ - user?: UserProps; isLoading?: boolean; /** * Hash link to the page's main content to enable keyboard and screen reader @@ -67,8 +54,6 @@ export interface TopNavigationProps export function TopNavigation({ logo, - user, - profileMenu, links, hamburger, isLoading, @@ -108,7 +93,6 @@ export function TopNavigation({ isLoading={Boolean(isLoading)} > {links && } - {profileMenu && user && } ); diff --git a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.module.css b/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.module.css deleted file mode 100644 index 8bcf402876..0000000000 --- a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.module.css +++ /dev/null @@ -1,57 +0,0 @@ -.profile { - height: 100%; - padding: 0 var(--cui-spacings-mega); - border-left: var(--cui-border-width-kilo) solid var(--cui-border-divider); -} - -.avatar { - width: var(--cui-icon-sizes-mega); - height: var(--cui-icon-sizes-mega); -} - -.details { - display: flex; - flex-direction: column; -} - -@media (min-width: 768px) { - .avatar { - width: var(--cui-icon-sizes-giga); - height: var(--cui-icon-sizes-giga); - } -} - -@media (max-width: 767px) { - .details { - display: none; - } -} - -@media (min-width: 768px) { - .details { - max-width: 20ch; - margin: 0 var(--cui-spacings-kilo); - } -} - -.chevron { - display: none; -} - -@media (min-width: 768px) { - .chevron { - display: block; - transition: transform var(--cui-transitions-default); - } - - button[aria-expanded="true"] .chevron { - transform: rotate(180deg); - } -} - -.truncate { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} diff --git a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.spec.tsx b/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.spec.tsx deleted file mode 100644 index 42e3c59473..0000000000 --- a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.spec.tsx +++ /dev/null @@ -1,87 +0,0 @@ -/** - * Copyright 2021, SumUp Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { describe, expect, it, vi } from 'vitest'; - -import { - act, - axe, - render, - screen, - userEvent, -} from '../../../../util/test-utils.js'; -import type { PopoverProps } from '../../../Popover/index.js'; - -import { ProfileMenu } from './ProfileMenu.js'; - -describe('ProfileMenu', () => { - const baseProps = { - user: { name: 'Jane Doe' }, - label: 'Open profile menu', - actions: [ - { - onClick: vi.fn(), - children: 'View profile', - }, - { - onClick: vi.fn(), - children: 'Settings', - }, - { type: 'divider' }, - { - onClick: vi.fn(), - children: 'Logout', - destructive: true, - }, - ] as PopoverProps['actions'], - }; - - it('should render with a profile picture', () => { - render( - , - ); - - expect(screen.getByRole('presentation')).toBeVisible(); - }); - - it('should call the onToggle callback with the popover open state', async () => { - const onToggle = vi.fn(); - - render(); - - const profileEl = screen.getByRole('button', { name: /Jane Doe/i }); - - await userEvent.click(profileEl); - - expect(onToggle).toHaveBeenCalledWith(true); - - await userEvent.click(profileEl); - - expect(onToggle).toHaveBeenCalledWith(false); - expect(onToggle).toHaveBeenCalledTimes(2); - }); - - it('should have no accessibility violations', async () => { - const { container } = render(); - - await act(async () => { - const actual = await axe(container); - expect(actual).toHaveNoViolations(); - }); - }); -}); diff --git a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx b/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx deleted file mode 100644 index 4dbe4ea289..0000000000 --- a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx +++ /dev/null @@ -1,141 +0,0 @@ -/** - * Copyright 2021, SumUp Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -'use client'; - -import { useState, useEffect, type ButtonHTMLAttributes } from 'react'; -import { ChevronDown, Profile as ProfileIcon } from '@sumup-oss/icons'; - -import { Avatar } from '../../../Avatar/index.js'; -import { Body } from '../../../Body/index.js'; -import { Popover, type PopoverProps } from '../../../Popover/index.js'; -import { Skeleton } from '../../../Skeleton/index.js'; -import type { UserProps } from '../../types.js'; -import { utilClasses } from '../../../../styles/utility.js'; -import { sharedClasses } from '../../../../styles/shared.js'; -import { clsx } from '../../../../styles/clsx.js'; - -import classes from './ProfileMenu.module.css'; - -interface ProfileProps extends ButtonHTMLAttributes { - /** - * A description of the button which opens the profile menu. - */ - label: string; - /** - * The user's profile. - */ - user: UserProps; -} - -function Profile({ user, label, className, ...props }: ProfileProps) { - const ariaLabel = [user.name, user.id] - .filter((part) => Boolean(part)) - .join(', '); - - return ( - - ); -} - -export interface ProfileMenuProps extends ProfileProps { - /** - * A collection of actions to be rendered in the profile menu. - * Same API as the Popover actions. - */ - actions: PopoverProps['actions']; - /** - * Function that is called when opening and closing the ProfileMenu. - */ - onToggle?: (isOpen: boolean) => void; - /** - * A class name for the Popover component. - */ - className?: string; -} - -export function ProfileMenu({ - user, - label, - actions, - onToggle, - className, -}: ProfileMenuProps) { - const [isOpen, setOpen] = useState(false); - const offset = { mainAxis: 8, crossAxis: -16 }; - - useEffect(() => { - if (onToggle) { - onToggle(isOpen); - } - }, [onToggle, isOpen]); - - return ( - // biome-ignore lint/a11y/useValidAriaRole: This removes the default `menu` role of the Popover. - ( - - )} - actions={actions} - placement="bottom-end" - fallbackPlacements={[]} - offset={offset} - className={className} - // This removes the default `menu` role of the Popover. - // eslint-disable-next-line jsx-a11y/aria-role - role={null} - /> - ); -} diff --git a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/index.ts b/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/index.ts deleted file mode 100644 index 656e38cb09..0000000000 --- a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright 2021, SumUp Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export { ProfileMenu } from './ProfileMenu.js'; - -export type { ProfileMenuProps } from './ProfileMenu.js';