[CDD] Create PillTag component

[Ditmar]

Component purpose

Implement a reusable pill/tag component to display categories like "Courses" and "Test" in a rounded chip style.

Requirements

• Accept props: label (string) and variant (e.g., primary, secondary). Define allowed variants as constants in .constants.ts.
• Use MUI Chip or a custom Box styled with styled() to create a pill shape with rounded corners, using theme spacing and palette tokens.
• Avoid hardcoded colors or pixel values; instead rely on the design system tokens.
• Define prop types in .types.ts, extending MUI component props if needed.
• Provide unit tests ensuring the component renders the correct label, applies the appropriate variant styles, and is keyboard accessible using data-testid attributes.
• Create Storybook stories showcasing each variant and demonstrating how long labels wrap or truncate.
• Document usage, props, and design guidelines in .docs.mdx.

Pill Tag

File structure

PillTag/
├── PillTag.tsx
├── PillTag.types.ts
├── PillTag.constants.ts
├── PillTag.styles.ts
├── PillTag.test.tsx
├── PillTag.stories.tsx
└── PillTag.docs.mdx

Figma

https://www.figma.com/design/Rh2fODqtUeQvC4mBfUp6YI/seminario-coding?node-id=1-1149&t=PgBYi4onHpKSffCV-0

[wachukitaaa]

Qa by @wachukitaaa