diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx index 5295b7a00..348ad95c7 100644 --- a/src/components/AccountNotifications.tsx +++ b/src/components/AccountNotifications.tsx @@ -8,8 +8,10 @@ import { AppContext } from '../context/App'; import { type Account, Size } from '../types'; import type { Notification } from '../typesGitHub'; import { openAccountProfile } from '../utils/links'; +import { HoverGroup } from './HoverGroup'; import { NotificationRow } from './NotificationRow'; import { RepositoryNotifications } from './RepositoryNotifications'; +import { InteractionButton } from './buttons/InteractionButton'; import { PlatformIcon } from './icons/PlatformIcon'; interface IAccountNotifications { @@ -82,16 +84,14 @@ export const AccountNotifications: FC = ( @{account.user.login} -
- -
+ /> + )} diff --git a/src/components/HoverGroup.test.tsx b/src/components/HoverGroup.test.tsx new file mode 100644 index 000000000..ea3573f68 --- /dev/null +++ b/src/components/HoverGroup.test.tsx @@ -0,0 +1,9 @@ +import { render } from '@testing-library/react'; +import { HoverGroup } from './HoverGroup'; + +describe('components/HoverGroup.tsx', () => { + it('should render', () => { + const tree = render(Hover Group); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/HoverGroup.tsx b/src/components/HoverGroup.tsx new file mode 100644 index 000000000..0d238d381 --- /dev/null +++ b/src/components/HoverGroup.tsx @@ -0,0 +1,13 @@ +import type { FC, ReactNode } from 'react'; + +interface IHoverGroup { + children: ReactNode; +} + +export const HoverGroup: FC = ({ children }: IHoverGroup) => { + return ( +
+ {children} +
+ ); +}; diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index 0d1d4ad03..964adf2dd 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -35,6 +35,8 @@ import { openUserProfile, } from '../utils/links'; import { formatReason } from '../utils/reason'; +import { HoverGroup } from './HoverGroup'; +import { InteractionButton } from './buttons/InteractionButton'; import { PillButton } from './buttons/PillButton'; import { AvatarIcon } from './icons/AvatarIcon'; @@ -255,45 +257,34 @@ export const NotificationRow: FC = ({ -
- - - - - -
+ /> + ); }; diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx index fa664c986..ab4769e67 100644 --- a/src/components/RepositoryNotifications.tsx +++ b/src/components/RepositoryNotifications.tsx @@ -16,7 +16,9 @@ import { AppContext } from '../context/App'; import { Size } from '../types'; import type { Notification } from '../typesGitHub'; import { openRepository } from '../utils/links'; +import { HoverGroup } from './HoverGroup'; import { NotificationRow } from './NotificationRow'; +import { InteractionButton } from './buttons/InteractionButton'; import { AvatarIcon } from './icons/AvatarIcon'; interface IRepositoryNotifications { @@ -81,37 +83,26 @@ export const RepositoryNotifications: FC = ({ -
- - - - - -
+ /> + {showRepositoryNotifications && diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index 33f51f6e7..8f1204781 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -40,7 +40,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
+
+ , + "container":
+ +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap index d4318b531..8275f94cb 100644 --- a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap +++ b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/buttons/SidebarButton.tsx should render - medium 1`] = ` +exports[`components/buttons/SidebarButton.tsx should render - with specific size 1`] = ` { "asFragment": [Function], "baseElement":