Component Story Wrappers

Create Storybook stories with reusable visual context wrappers.

Problem Description

You need to create stories for a Button component and a Card component. These stories should display components with consistent visual styling context applied through wrappers.

Your task is to:

• Create stories for a Button component with "Primary" and "Secondary" variants
• Create stories for a Card component with "Default" and "Featured" variants
• Apply a centered layout wrapper to all Button stories
• Apply a dark theme wrapper only to the "Featured" Card story
• Ensure wrappers provide the necessary HTML structure and styling context

This tests your ability to use wrapper functions that apply consistent context across stories without duplicating code.

Requirements

Button Stories

• Create Button.stories.js with a default export containing the component metadata
• Include two stories: Primary and Secondary
• Apply a layout wrapper to all Button stories that centers content in a div with 20px padding

Card Stories

• Create Card.stories.js with a default export containing the component metadata
• Include two stories: Default and Featured
• Apply a dark theme wrapper only to the Featured story that wraps content in a div with a dark background class

Test Cases

• The Primary Button story is wrapped with a centering layout div @test
• The Featured Card story is wrapped with a dark theme div @test
• The Default Card story does NOT have the dark theme wrapper @test

Implementation

@generates @generates

Components (Provided)

You can assume these components exist and are already imported:

// Button component
const Button = ({ variant, label }) => (
  <button className={`btn-${variant}`}>{label}</button>
);

// Card component
const Card = ({ title, content }) => (
  <div className="card">
    <h3>{title}</h3>
    <p>{content}</p>
  </div>
);

Expected Output

Your story files should:

1. Export story metadata as the default export
2. Export individual stories as named exports
3. Use wrapper functions that can access the story rendering function
4. Apply wrappers at the correct scope (component-level or story-level)

Dependencies { .dependencies }

@storybook/react { .dependency }

Provides React component story support and configuration.

react { .dependency }

Provides UI component rendering support.