refactor: new pill component (#1222)

src/components/NotificationRow.tsx

@@ -11,7 +11,6 @@ import {
 import { type FC, type MouseEvent, useCallback, useContext } from 'react';
 
 import { AppContext } from '../context/App';
-import { PILL_CLASS_NAME } from '../styles/gitify';
 import { type Account, IconColor } from '../types';
 import type { Notification } from '../typesGitHub';
 import {
@@ -25,6 +24,7 @@ import {
 } from '../utils/icons';
 import { openNotification, openUserProfile } from '../utils/links';
 import { formatReason } from '../utils/reason';
+import { PillButton } from './buttons/PillButton';
 
 interface IProps {
   account: Account;
@@ -143,77 +143,56 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
           {settings.showPills && (
             <div>
               {notification.subject?.linkedIssues?.length > 0 && (
-                <span title={linkedIssuesPillDescription}>
-                  <button type="button" className={PILL_CLASS_NAME}>
-                    <IssueClosedIcon
-                      size={12}
-                      className={`mr-1 ${IconColor.GREEN}`}
-                      aria-label={linkedIssuesPillDescription}
-                    />
-                    {notification.subject.linkedIssues.length}
-                  </button>
-                </span>
+                <PillButton
+                  title={linkedIssuesPillDescription}
+                  metric={notification.subject.linkedIssues.length}
+                  icon={IssueClosedIcon}
+                  color={IconColor.GREEN}
+                />
               )}
+
               {notification.subject.reviews?.map((review) => {
                 const icon = getPullRequestReviewIcon(review);
                 if (!icon) {
                   return null;
                 }
 
                 return (
-                  <span key={review.state} title={icon.description}>
-                    <button type="button" className={PILL_CLASS_NAME}>
-                      <icon.type
-                        size={12}
-                        className={`mr-1 ${icon.color}`}
-                        aria-label={icon.description}
-                      />
-                      {review.users.length}
-                    </button>
-                  </span>
+                  <PillButton
+                    key={review.state}
+                    title={icon.description}
+                    metric={review.users.length}
+                    icon={icon.type}
+                    color={icon.color}
+                  />
                 );
               })}
               {notification.subject?.comments > 0 && (
-                <span title={commentsPillDescription}>
-                  <button type="button" className={PILL_CLASS_NAME}>
-                    <CommentIcon
-                      size={12}
-                      className={`mr-1 ${IconColor.GRAY}`}
-                      aria-label={commentsPillDescription}
-                    />
-                    {notification.subject.comments}
-                  </button>
-                </span>
+                <PillButton
+                  title={commentsPillDescription}
+                  metric={notification.subject.comments}
+                  icon={CommentIcon}
+                  color={IconColor.GRAY}
+                />
               )}
               {notification.subject?.labels?.length > 0 && (
-                <span title={labelsPillDescription}>
-                  <button type="button" className={PILL_CLASS_NAME}>
-                    <TagIcon
-                      size={12}
-                      className={`mr-1 ${IconColor.GRAY}`}
-                      aria-label={labelsPillDescription}
-                    />
-                    {notification.subject.labels.length}
-                  </button>
-                </span>
+                <PillButton
+                  title={labelsPillDescription}
+                  metric={notification.subject.labels.length}
+                  icon={TagIcon}
+                  color={IconColor.GRAY}
+                />
               )}
               {notification.subject.milestone && (
-                <span
-                  className="ml-1"
+                <PillButton
                   title={notification.subject.milestone.title}
-                >
-                  <button type="button" className={PILL_CLASS_NAME}>
-                    <MilestoneIcon
-                      size={12}
-                      className={
-                        notification.subject.milestone.state === 'open'
-                          ? IconColor.GREEN
-                          : IconColor.RED
-                      }
-                      aria-label={notification.subject.milestone.title}
-                    />
-                  </button>
-                </span>
+                  icon={MilestoneIcon}
+                  color={
+                    notification.subject.milestone.state === 'open'
+                      ? IconColor.GREEN
+                      : IconColor.RED
+                  }
+                />
               )}
             </div>
           )}

src/components/buttons/PillButton.test.tsx

@@ -0,0 +1,17 @@
+import { MarkGithubIcon } from '@primer/octicons-react';
+import { render } from '@testing-library/react';
+import { IconColor } from '../../types';
+import { type IPillButton, PillButton } from './PillButton';
+
+describe('components/buttons/PillButton.tsx', () => {
+  it('should render', () => {
+    const props: IPillButton = {
+      title: 'Mock Pill',
+      metric: 1,
+      icon: MarkGithubIcon,
+      color: IconColor.GREEN,
+    };
+    const tree = render(<PillButton {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/buttons/PillButton.tsx

@@ -0,0 +1,29 @@
+import type { Icon } from '@primer/octicons-react';
+import type { FC } from 'react';
+import type { IconColor } from '../../types';
+
+export interface IPillButton {
+  key?: string;
+  title: string;
+  metric?: number;
+  icon: Icon;
+  color: IconColor;
+}
+
+export const PillButton: FC<IPillButton> = (props: IPillButton) => {
+  return (
+    <span title={props.title}>
+      <button
+        type="button"
+        className="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+      >
+        <props.icon
+          size={12}
+          className={`mr-1 ${props.color}`}
+          aria-label={props.title}
+        />
+        {props.metric}
+      </button>
+    </span>
+  );
+};

src/styles/gitify.ts

@@ -4,7 +4,4 @@ export const BUTTON_CLASS_NAME =
 export const BUTTON_SIDEBAR_CLASS_NAME =
   'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default';
 
-export const PILL_CLASS_NAME =
-  'rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700';
-
 export const READ_NOTIFICATION_CLASS_NAME = 'opacity-50 dark:opacity-50';