feat: Badge component (#937)

Author: alexanbj

.changeset/khaki-buttons-impress.md

@@ -0,0 +1,5 @@
+---
+'@obosbbl/grunnmuren-react': minor
+---
+
+add `<Badge />` component

packages/react/src/badge/Badge.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { cx } from 'cva';
+import { Fragment } from 'react';
+import { PaintRoller } from '@obosbbl/grunnmuren-icons-react';
+
+import { Badge } from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Badge',
+  component: Badge,
+  render: (props) => {
+    return (
+      <div className="space-x-4">
+        <Badge {...props} size="small">
+          Small
+        </Badge>
+        <Badge {...props} size="medium">
+          Medium
+        </Badge>
+        <Badge {...props} size="large">
+          Large
+        </Badge>
+      </div>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Sandbox = () => {
+  const colors = [
+    'mint',
+    'sky',
+    'blue-dark',
+    'green-dark',
+    'gray-dark',
+    'white',
+  ] as const;
+
+  return colors.map((color) => (
+    <Fragment key={color}>
+      <h2 className="font-medium">{color}</h2>
+      <div className={cx('space-x-4 p-2', color === 'white' && 'bg-gray')}>
+        <Badge color={color} size="small">
+          small
+        </Badge>
+        <Badge color={color} size="medium">
+          medium
+        </Badge>
+        <Badge color={color} size="large">
+          large
+        </Badge>
+      </div>
+    </Fragment>
+  ));
+};
+
+export const WithIcon = () => {
+  const colors = [
+    'mint',
+    'sky',
+    'blue-dark',
+    'green-dark',
+    'gray-dark',
+    'white',
+  ] as const;
+
+  return colors.map((color) => (
+    <Fragment key={color}>
+      <h2 className="font-medium">{color}</h2>
+      <div className={cx('space-x-4 p-2', color === 'white' && 'bg-gray')}>
+        <Badge color={color} size="small">
+          <PaintRoller />
+          small
+        </Badge>
+        <Badge color={color} size="medium">
+          <PaintRoller />
+          medium
+        </Badge>
+        <Badge color={color} size="large">
+          <PaintRoller />
+          large
+        </Badge>
+      </div>
+    </Fragment>
+  ));
+};
+
+export const Sizes: Story = {
+  args: {
+    color: 'mint',
+  },
+  render: (props) => {
+    return (
+      <div className="space-x-4">
+        <Badge {...props} size="small">
+          Small
+        </Badge>
+        <Badge {...props} size="medium">
+          Medium
+        </Badge>
+        <Badge {...props} size="large">
+          Large
+        </Badge>
+      </div>
+    );
+  },
+};

packages/react/src/badge/Badge.tsx

@@ -0,0 +1,46 @@
+import { type VariantProps, cva } from 'cva';
+import { type Ref, forwardRef } from 'react';
+
+type BadgeProps = VariantProps<typeof badgeVariants> & {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const badgeVariants = cva({
+  base: [
+    'inline-flex w-fit items-center justify-center gap-1.5 rounded-lg [&_svg]:shrink-0',
+  ],
+  variants: {
+    color: {
+      'gray-dark': 'bg-gray-dark text-white',
+      mint: 'bg-mint',
+      sky: 'bg-sky',
+      white: 'bg-white',
+      'blue-dark': 'bg-blue-dark text-white',
+      'green-dark': 'bg-green-dark text-white',
+    },
+    size: {
+      small: 'description px-2 py-0.5 [&_svg]:h-4 [&_svg]:w-4',
+      medium: 'description px-2.5 py-1.5 [&_svg]:h-4 [&_svg]:w-4',
+      large: 'paragraph px-3 py-2 [&_svg]:h-5 [&_svg]:w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+  },
+});
+
+function Badge(props: BadgeProps, ref: Ref<HTMLSpanElement>) {
+  const { className: _className, color, size, ...restProps } = props;
+
+  const className = badgeVariants({
+    className: _className,
+    color,
+    size,
+  });
+
+  return <span className={className} {...restProps} ref={ref} />;
+}
+
+const _Badge = forwardRef(Badge);
+export { _Badge as Badge, type BadgeProps };

packages/react/src/badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge';

packages/react/src/index.ts

@@ -3,6 +3,7 @@ export { Form } from 'react-aria-components';
 
 export * from './GrunnmurenProvider';
 export * from './accordion';
+export * from './badge';
 export * from './button';
 export * from './checkbox';
 export * from './combobox';