Merge pull request #4 from Bandmators/feature/badge

feat(common): badge (#3)

src/components/common/Badge/index.tsx

@@ -0,0 +1,93 @@
+import { Theme, css } from '@emotion/react';
+import styled from '@emotion/styled';
+import * as React from 'react';
+
+import { SizeType } from '@/types/size';
+
+type BadgeVariantType = 'primary' | 'secondary' | 'warning' | 'danger' | 'outline' | 'ghost';
+
+const BadgeVariantStyles = ({ theme, variant }: { theme: Theme; variant: BadgeVariantType }) => {
+  switch (variant) {
+    case 'secondary':
+      return css`
+        background-color: ${theme.colors.secondary};
+      `;
+    case 'danger':
+      return css`
+        color: ${theme.colors.white};
+        background-color: ${theme.colors.danger};
+      `;
+    case 'warning':
+      return css`
+        color: ${theme.colors.white};
+        background-color: ${theme.colors.warning};
+      `;
+    case 'outline':
+      return css`
+        background-color: transparent;
+        border: 1px solid ${theme.colors.gray['300']};
+        &:hover {
+          background-color: ${theme.colors.gray['100']};
+        }
+      `;
+    case 'ghost':
+      return css`
+        background-color: transparent;
+      `;
+    case 'primary':
+    default:
+      return css`
+        color: white;
+        background-color: ${theme.colors.primary};
+      `;
+  }
+};
+
+const BadgeSizeStyles = ({ size }: { size: SizeType }) => {
+  switch (size) {
+    case 'sm':
+      return css`
+        padding: 0.125rem 0.5rem;
+      `;
+    case 'lg':
+      return css`
+        padding: 0.375rem 0.75rem;
+      `;
+    case 'md':
+    default:
+      return css`
+        padding: 0.25rem 0.625rem;
+      `;
+  }
+};
+
+const StyledBadge = styled.div<BadgeVariantProps>`
+  font-weight: 500;
+  font-size: 75%;
+  line-height: 1rem;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  display: inline-flex;
+  align-items: center;
+
+  ${({ theme, variant }) => variant && BadgeVariantStyles({ theme, variant })}
+
+  ${({ size }) => size && BadgeSizeStyles({ size })}
+`;
+
+export interface BadgeVariantProps {
+  /*
+        Badge variant
+    */
+  variant?: BadgeVariantType;
+  /*
+        Badge size
+    */
+  size?: SizeType;
+}
+
+export interface BadgeProps extends React.ComponentProps<'div'>, BadgeVariantProps {}
+
+export const Badge = ({ className, variant = 'primary', size = 'md', ...props }: BadgeProps) => {
+  return <StyledBadge className={className} variant={variant} size={size} {...props} />;
+};

src/components/common/Button/index.tsx

@@ -10,7 +10,7 @@ const ButtonVariantStyles = ({ theme, variant }: { theme: Theme; variant: Button
   switch (variant) {
     case 'secondary':
       return css`
-        background-color: ${theme.colors.gray['200']};
+        background-color: ${theme.colors.secondary};
       `;
     case 'danger':
       return css`

src/components/common/index.ts

@@ -1,4 +1,5 @@
 export * from './Avatar';
+export * from './Badge';
 export * from './Button';
 export * from './Card';
 export * from './Form';

src/stories/common/Badge.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Badge } from '../..';
+
+const meta = {
+  title: 'common/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {
+    layout: 'centered',
+    componentSubtitle: 'Base Badge',
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Badge',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    ...Primary.args,
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    ...Primary.args,
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    ...Primary.args,
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    ...Primary.args,
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    ...Primary.args,
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    children: 'Link',
+  },
+  decorators: [
+    Story => {
+      return (
+        <a href="#with-link">
+          <Story />
+        </a>
+      );
+    },
+  ],
+};
+
+export const WithText: Story = {
+  args: {
+    children: 'Badge',
+  },
+  decorators: [
+    Story => {
+      return (
+        <div>
+          <Story /> <span>WithText</span>
+        </div>
+      );
+    },
+  ],
+};

src/styles/theme.ts

@@ -5,6 +5,7 @@ export const BMateColors = {
   white: '#FAFAFA',
   black: '#212121',
   primary: '#212121',
+  secondary: '#EEEEEE',
   gray: {
     50: '#FAFAFA',
     100: '#F5F5F5',