Create `Label` Component

[fabiorodriguesdev]

Label Component Instructions

Overview

Build a Netflix-style Label component with multiple label types based on the Figma design. This component displays various content labels including ranking labels, TOP 10 icons, and status labels with consistent Netflix branding.

• https://www.figma.com/design/UL3mFZrsl1CM4dGhTd0gyk/Rediflix-Design-System-2025?node-id=182-14500&m=dev

Component Structure

Create the following files in src/components/Label/:

• Label.tsx - Main component
• Label.module.css - Styles
• Label.types.ts - TypeScript interfaces
• Label.stories.tsx - Storybook stories
• index.ts - Export file

Props Interface

interface LabelProps {
  type?: 'ranking' | 'top10-icon' | 'status';
  variant?: 'recently-added' | 'new-season' | 'leaving-soon';
  ranking?: number;
  category?: string;
  className?: string;
}

Design Specifications

Label Types

1. Ranking Labels: TOP 10 icon with ranking text (e.g., "feat: added Storybook to the project #2 in TV Shows Today")
2. TOP 10 Icons: Standalone TOP 10 flag icon without text
3. Status Labels: Text-based labels for content status

Visual Elements

Ranking Labels

• TOP 10 Icon:
  • Background: Netflix red (#E50914)
  • Shape: Rectangular with slightly rounded corners
  • Text: White (#FFFFFF), bold sans-serif
  • Layout: "TOP" stacked above "10", with "TOP" smaller than "10"
  • Dimensions: Flag-like shape
• Ranking Text:
  • Color: White (#FFFFFF)
  • Typography: Bold sans-serif, slightly larger than "TOP" text
  • Content: "#{number} in {category}"
  • Position: Right of TOP 10 icon with small gap

TOP 10 Icons (Standalone)

• Same styling as TOP 10 icon in ranking labels
• No accompanying text
• Used independently for content categorization

Status Labels

• Background: Netflix red (#E50914)
• Shape: Rectangular with slightly rounded corners
• Text: White (#FFFFFF), bold sans-serif, horizontally centered
• Content: "Recently Added", "New Season", "Leaving Soon"
• Padding: Appropriate internal spacing for text

Layout Structure

• Container: Flexbox with proper alignment
• Gap: Small horizontal gap between TOP 10 icon and ranking text
• Spacing: Consistent vertical spacing between stacked elements
• Alignment: Center alignment for text within labels

CSS Variables to Use

• --netflix-red (#E50914) for background colors
• --white (#FFFFFF) for text color
• --font-family for Netflix Sans font family
• --font-bold (700) for font weight
• --radius-small for border radius
• --transition-base for animations

Implementation Notes

Ranking Label Structure

<div className="ranking-container">
  <div className="top10-icon">
    <span className="top-text">TOP</span>
    <span className="ten-text">10</span>
  </div>
  <span className="ranking-text">#{ranking} in {category}</span>
</div>

TOP 10 Icon Structure

<div className="top10-container">
  <div className="top10-icon">
    <span className="top-text">TOP</span>
    <span className="ten-text">10</span>
  </div>
</div>

Status Label Structure

<div className="status-container">
  <span className="status-text">{variant}</span>
</div>

Key Features to Implement

1. Conditional Rendering: Different components for each label type
2. Dynamic Content: Ranking numbers and categories for ranking labels
3. Responsive Design: Proper scaling and positioning
4. Accessibility: Proper ARIA labels and semantic HTML
5. Type Safety: Strict TypeScript interfaces for all props
6. Consistent Styling: Unified Netflix branding across all variants

CSS Classes Structure

.rankingContainer {
  /* Flexbox layout for ranking labels */
}

.top10Icon {
  /* TOP 10 flag styling */
}

.topText {
  /* "TOP" text styling */
}

.tenText {
  /* "10" text styling */
}

.rankingText {
  /* Ranking text styling */
}

.top10Container {
  /* Standalone TOP 10 container */
}

.statusContainer {
  /* Status label container */
}

.statusText {
  /* Status text styling */
}

Variant Mapping

Status Label Variants

• recently-added → "Recently Added"
• new-season → "New Season"
• leaving-soon → "Leaving Soon"

Ranking Label Examples

• ranking={2} + category="TV Shows Today" → "feat: added Storybook to the project #2 in TV Shows Today"
• ranking={1} + category="Movies" → "feat: add api url config #1 in Movies"

Testing Requirements

• All label type variants (ranking, top10-icon, status)
• Dynamic ranking number display
• Proper text rendering for all variants
• Responsive behavior
• Accessibility compliance
• Visual consistency across types
• Proper spacing and alignment

Usage Examples

// Ranking label
<Label
  type="ranking"
  ranking={2}
  category="TV Shows Today"
/>

// Standalone TOP 10 icon
<Label type="top10-icon" />

// Status labels
<Label type="status" variant="recently-added" />
<Label type="status" variant="new-season" />
<Label type="status" variant="leaving-soon" />

// With custom styling
<Label
  type="ranking"
  ranking={1}
  category="Movies"
  className="custom-class"
/>

Design Tokens Reference

• Netflix Red: #E50914
• Text Color: #FFFFFF
• Font Family: Netflix Sans Bold
• Font Weight: 700 (Bold)
• Border Radius: Slightly rounded corners
• Layout: Flexbox with center alignment
• Spacing: Consistent gaps and padding

Component Hierarchy

Label/
├── Label.tsx              # Main component with conditional rendering
├── Label.module.css       # All styling for different label types
├── Label.types.ts         # TypeScript interfaces
├── Label.stories.tsx      # Storybook stories for all variants
└── index.ts              # Export file

Accessibility Considerations

• Use semantic HTML elements (<span>, <div>)
• Provide proper ARIA labels for screen readers
• Ensure sufficient color contrast
• Support keyboard navigation if interactive
• Use meaningful alt text for any icons/images