Skip to content

Commit b1bf28c

Browse files
setchysetchy
authored
refactor: interaction button and hover group components (#1289)
* refactor: interaction button component * refactor: interaction button component * refactor: hover group and interaction button components * Merge branch 'main' into refactor/interaction-button-component
1 parent 5faff22 commit b1bf28c

14 files changed

+360
-115
lines changed

‎src/components/AccountNotifications.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import { AppContext } from '../context/App';
88
import { type Account, Size } from '../types';
99
import type { Notification } from '../typesGitHub';
1010
import { openAccountProfile } from '../utils/links';
11+
import { HoverGroup } from './HoverGroup';
1112
import { NotificationRow } from './NotificationRow';
1213
import { RepositoryNotifications } from './RepositoryNotifications';
14+
import { InteractionButton } from './buttons/InteractionButton';
1315
import { PlatformIcon } from './icons/PlatformIcon';
1416

1517
interface IAccountNotifications {
@@ -82,16 +84,14 @@ export const AccountNotifications: FC<IAccountNotifications> = (
8284
@{account.user.login}
8385
</button>
8486
</div>
85-
<div className="opacity-0 transition-opacity group-hover:opacity-80">
86-
<button
87-
type="button"
88-
className="h-full hover:text-green-500 focus:outline-none"
87+
<HoverGroup>
88+
<InteractionButton
8989
title={toggleAccountNotificationsLabel}
90+
icon={ChevronIcon}
91+
size={Size.SMALL}
9092
onClick={toggleAccountNotifications}
91-
>
92-
<ChevronIcon size={Size.SMALL} />
93-
</button>
94-
</div>
93+
/>
94+
</HoverGroup>
9595
</div>
9696
)}
9797

‎src/components/HoverGroup.test.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { render } from '@testing-library/react';
2+
import { HoverGroup } from './HoverGroup';
3+
4+
describe('components/HoverGroup.tsx', () => {
5+
it('should render', () => {
6+
const tree = render(<HoverGroup>Hover Group</HoverGroup>);
7+
expect(tree).toMatchSnapshot();
8+
});
9+
});

‎src/components/HoverGroup.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { FC, ReactNode } from 'react';
2+
3+
interface IHoverGroup {
4+
children: ReactNode;
5+
}
6+
7+
export const HoverGroup: FC<IHoverGroup> = ({ children }: IHoverGroup) => {
8+
return (
9+
<div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
10+
{children}
11+
</div>
12+
);
13+
};

‎src/components/NotificationRow.tsx‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ import {
3535
openUserProfile,
3636
} from '../utils/links';
3737
import { formatReason } from '../utils/reason';
38+
import { HoverGroup } from './HoverGroup';
39+
import { InteractionButton } from './buttons/InteractionButton';
3840
import { PillButton } from './buttons/PillButton';
3941
import { AvatarIcon } from './icons/AvatarIcon';
4042

@@ -255,45 +257,34 @@ export const NotificationRow: FC<INotificationRow> = ({
255257
</div>
256258
</div>
257259

258-
<div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
259-
<button
260-
type="button"
261-
className="h-full hover:text-green-500 focus:outline-none"
260+
<HoverGroup>
261+
<InteractionButton
262262
title="Mark as Done"
263+
icon={CheckIcon}
264+
size={Size.MEDIUM}
263265
onClick={() => {
264266
setAnimateExit(!settings.delayNotificationState);
265267
setShowAsRead(settings.delayNotificationState);
266268
markNotificationDone(notification);
267269
}}
268-
>
269-
<CheckIcon size={Size.MEDIUM} aria-label="Mark as Done" />
270-
</button>
271-
272-
<button
273-
type="button"
274-
className="h-full hover:text-green-500 focus:outline-none"
270+
/>
271+
<InteractionButton
275272
title="Mark as Read"
273+
icon={ReadIcon}
274+
size={Size.SMALL}
276275
onClick={() => {
277276
setAnimateExit(!settings.delayNotificationState);
278277
setShowAsRead(settings.delayNotificationState);
279278
markNotificationRead(notification);
280279
}}
281-
>
282-
<ReadIcon size={Size.SMALL} aria-label="Mark as Read" />
283-
</button>
284-
285-
<button
286-
type="button"
287-
className="h-full hover:text-red-500 focus:outline-none"
280+
/>
281+
<InteractionButton
288282
title="Unsubscribe from Thread"
283+
icon={BellSlashIcon}
284+
size={Size.SMALL}
289285
onClick={unsubscribeFromThread}
290-
>
291-
<BellSlashIcon
292-
size={Size.SMALL}
293-
aria-label="Unsubscribe from Thread"
294-
/>
295-
</button>
296-
</div>
286+
/>
287+
</HoverGroup>
297288
</div>
298289
);
299290
};

‎src/components/RepositoryNotifications.tsx‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ import { AppContext } from '../context/App';
1616
import { Size } from '../types';
1717
import type { Notification } from '../typesGitHub';
1818
import { openRepository } from '../utils/links';
19+
import { HoverGroup } from './HoverGroup';
1920
import { NotificationRow } from './NotificationRow';
21+
import { InteractionButton } from './buttons/InteractionButton';
2022
import { AvatarIcon } from './icons/AvatarIcon';
2123

2224
interface IRepositoryNotifications {
@@ -81,37 +83,26 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
8183
</span>
8284
</div>
8385

84-
<div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
85-
<button
86-
type="button"
87-
className="h-full hover:text-green-500 focus:outline-none"
86+
<HoverGroup>
87+
<InteractionButton
8888
title="Mark Repository as Done"
89+
icon={CheckIcon}
90+
size={Size.MEDIUM}
8991
onClick={markRepoAsDone}
90-
>
91-
<CheckIcon
92-
size={Size.MEDIUM}
93-
aria-label="Mark Repository as Done"
94-
/>
95-
</button>
96-
97-
<button
98-
type="button"
99-
className="h-full hover:text-green-500 focus:outline-none"
92+
/>
93+
<InteractionButton
10094
title="Mark Repository as Read"
95+
icon={ReadIcon}
96+
size={Size.SMALL}
10197
onClick={markRepoAsRead}
102-
>
103-
<ReadIcon size={Size.SMALL} aria-label="Mark Repository as Read" />
104-
</button>
105-
106-
<button
107-
type="button"
108-
className="h-full hover:text-green-500 focus:outline-none"
98+
/>
99+
<InteractionButton
109100
title={toggleRepositoryNotificationsLabel}
101+
icon={ChevronIcon}
102+
size={Size.SMALL}
110103
onClick={toggleRepositoryNotifications}
111-
>
112-
<ChevronIcon size={Size.SMALL} />
113-
</button>
114-
</div>
104+
/>
105+
</HoverGroup>
115106
</div>
116107

117108
{showRepositoryNotifications &&

0 commit comments

Comments
 (0)