feat: APP-2612 - Implement Tag component (#46)

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   Implement `Tag` component
+
 ## [1.0.5] - 2023-11-20
 
 ### Changed

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './icon';
 export * from './illustrations';
 export * from './progress';
 export * from './spinner';
+export * from './tag';

src/components/tag/index.ts

@@ -0,0 +1 @@
+export { Tag, type ITagProps } from './tag';

src/components/tag/tag.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tag } from './tag';
+
+const meta: Meta<typeof Tag> = {
+    title: 'components/Tag',
+    component: Tag,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/jfKRr1V9evJUp1uBeyP3Zz/v1.0.0?type=design&node-id=21-200&mode=design&t=9F9GGTyrap4TVsvP-4',
+        },
+    },
+};
+
+type Story = StoryObj<typeof Tag>;
+
+/**
+ * Default usage example of the Tag component.
+ */
+export const Default: Story = {
+    args: {
+        label: 'Label',
+    },
+};
+
+export default meta;

src/components/tag/tag.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { Tag, type ITagProps } from './tag';
+
+describe('<Tag /> component', () => {
+    const createTestComponent = (props?: Partial<ITagProps>) => {
+        const completeProps = {
+            label: 'my-label',
+            ...props,
+        };
+
+        return <Tag {...completeProps} />;
+    };
+
+    it('renders the specified label', () => {
+        const label = 'label-test';
+        render(createTestComponent({ label }));
+        expect(screen.getByText(label)).toBeInTheDocument();
+    });
+});

src/components/tag/tag.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+
+export type TagVariant = 'neutral' | 'info' | 'warning' | 'critical' | 'success' | 'primary';
+
+export interface ITagProps {
+    /**
+     * Defines the variant of the tag.
+     * @default neutral
+     */
+    variant?: TagVariant;
+    /**
+     * Label of the tag.
+     */
+    label: string;
+    /**
+     * Classes for the component.
+     */
+    className?: string;
+}
+
+const variantToClassName: Record<TagVariant, string> = {
+    neutral: 'bg-neutral-100 text-neutral-600',
+    info: 'bg-info-200 text-info-800',
+    warning: 'bg-warning-200 text-warning-800',
+    critical: 'bg-critical-200 text-critical-800',
+    success: 'bg-success-200 text-success-800',
+    primary: 'bg-primary-100 text-primary-800',
+};
+
+export const Tag: React.FC<ITagProps> = (props) => {
+    const { label, variant = 'neutral', className } = props;
+
+    return (
+        <div className={classNames('flex h-5 items-center rounded px-1', variantToClassName[variant], className)}>
+            <p className="text-sm font-semibold leading-tight md:text-base">{label}</p>
+        </div>
+    );
+};