feat: add Badge component (nodejs#5776)

* fix: tailwind darkMode config updated

* feat: badge component

* chore: component enums added

* docs: storybook for badge

* refactor: unnecessary children type removed

* fix: tailwind darkMode config updated

* feat: badge component

* chore: component enums added

* docs: storybook for badge

* refactor: unnecessary children type removed

* refactor: class names updated, components moved into the single component

* refactor: feedbacks from review

* refactor: classnames replaced with template literals

* refactor: font information moved to wrapper

* chore: Unnecessary stories removed

* chore: Badge component import order and return statement

Author: canerakdas

components/Common/Badge/index.module.scss

@@ -0,0 +1,63 @@
+.wrapper {
+  @apply border rounded-full flex items-center w-fit py-1 pl-1 pr-2.5 text-sm font-medium;
+
+  .icon {
+    @apply w-4 h-4;
+  }
+
+  .badge {
+    @apply rounded-full border px-2.5 py-0.5 mr-2 text-white;
+  }
+
+  .message {
+    @apply mr-1;
+  }
+
+  &.default {
+    @apply border-green-200 bg-green-100 dark:border-green-700 dark:bg-neutral-900;
+
+    .icon {
+      @apply text-green-500 dark:text-green-300;
+    }
+
+    .badge {
+      @apply border-green-200 dark:border-green-600 bg-green-600;
+    }
+
+    .message {
+      @apply text-green-700 dark:text-green-300;
+    }
+  }
+
+  &.error {
+    @apply border-danger-200 dark:border-danger-700 bg-danger-100 dark:bg-neutral-900;
+
+    .icon {
+      @apply text-danger-500 dark:text-danger-300;
+    }
+
+    .badge {
+      @apply border-danger-200 dark:border-danger-600 bg-danger-600;
+    }
+
+    .message {
+      @apply text-danger-700 dark:text-danger-300;
+    }
+  }
+
+  &.warning {
+    @apply border-warning-200 dark:border-warning-700 bg-warning-100 dark:bg-neutral-900;
+
+    .icon {
+      @apply text-warning-500 dark:text-warning-300;
+    }
+
+    .badge {
+      @apply border-warning-200 dark:border-warning-600 bg-warning-600;
+    }
+
+    .message {
+      @apply text-warning-700 dark:text-warning-300;
+    }
+  }
+}

components/Common/Badge/index.stories.tsx

@@ -0,0 +1,34 @@
+import Badge from './';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Badge>;
+type Meta = MetaObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'default',
+    badgeText: 'New',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'error',
+    badgeText: 'New',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'warning',
+    badgeText: 'New',
+  },
+};
+
+export default { component: Badge } as Meta;

components/Common/Badge/index.tsx

@@ -0,0 +1,26 @@
+import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
+import LocalizedLink from '@/components/LocalizedLink';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import type Link from 'next/link';
+
+import styles from './index.module.scss';
+
+type BadgeProps = {
+  kind?: 'default' | 'warning' | 'error';
+  badgeText?: string;
+} & ComponentProps<typeof Link>;
+
+const Badge: FC<PropsWithChildren<BadgeProps>> = ({
+  kind = 'default',
+  badgeText,
+  children,
+  ...args
+}) => (
+  <LocalizedLink className={`${styles.wrapper} ${styles[kind]}`} {...args}>
+    {badgeText && <span className={styles.badge}>{badgeText}</span>}
+    <span className={styles.message}>{children}</span>
+    <ArrowRightIcon className={styles.icon} />
+  </LocalizedLink>
+);
+
+export default Badge;