Phase 7.3b: Migrate Assignment/Book Info Components to Plain CSS

[OpenStaxClaude]

Summary

This PR migrates 4 assignment and book-related content components from styled-components to plain CSS as part of Phase 7.3 (CORE-2284).

Components Migrated

1. Assigned.tsx - Main assigned content wrapper with platform-specific display
2. AssignedTopBar.tsx - Top bar for assigned content with text resizer
3. Attribution.tsx - Attribution details component (also migrated from class to functional component)
4. BuyBook.tsx - Book purchase link component

Migration Highlights

• ✅ 4 components migrated from styled-components to plain CSS
• ✅ 4 new CSS files created with all styling
• ✅ Attribution.tsx also converted from class component + connect() to functional component + useSelector hooks
• ✅ All styled-components imports removed
• ✅ CSS variables used for dynamic theme values
• ✅ Data attributes used for conditional styling
• ✅ Component behavior and functionality preserved
• ✅ Follows patterns from PLAIN_CSS_MIGRATION_LEARNINGS.md

Files Changed

New CSS Files:

• src/app/content/components/Assigned.css (32 lines)
• src/app/content/components/AssignedTopBar.css (50 lines)
• src/app/content/components/Attribution.css (145 lines)
• src/app/content/components/BuyBook.css (28 lines)

Modified Components:

• src/app/content/components/Assigned.tsx - Migrated 3 styled-components to plain CSS
• src/app/content/components/AssignedTopBar.tsx - Migrated 2 styled-components to plain CSS
• src/app/content/components/Attribution.tsx - Migrated 5 styled-components + class→functional conversion
• src/app/content/components/BuyBook.tsx - Migrated 2 styled-components to plain CSS

Key Patterns Used

CSS Variables for Dynamic Values:

// Setting variables in component
<div 
  className="assigned-topbar-wrapper"
  style={{
    '--assigned-topbar-bg-color': theme.color.neutral.base,
    '--assigned-topbar-text-color': theme.color.text.default,
    ...style
  }}
>

Data Attributes for Conditional Styling:

<div 
  className="platform-wrapper"
  data-platform="assignable"
>

Top-Level Media Queries:

@media screen and (max-width: 75em) {
  .toast-override {
    top: var(--assigned-mobile-top);
  }
}

Attribution Component Refactoring

Beyond the styling migration, Attribution.tsx was also modernized:

• Class → Functional Component: Converted from class-based to functional component with hooks
• connect() → useSelector: Replaced Redux connect() HOC with useSelector hook
• Lifecycle → Effects: Converted lifecycle methods to useEffect hooks
• Refs: Updated from createRef() to useRef()

Related

• Jira: CORE-2284 - Phase 7.3: Migrate Remaining Content & App Components
• Previous PR: Phase 7.3a: Migrate Content Components to Plain CSS #3059 (Phase 7.3a - Content Components)
• Next PR: 7.3c (App Components - Layout & Common UI)

Testing Notes

All component functionality has been preserved:

• Assigned content rendering with platform-specific display
• Text resizer integration in AssignedTopBar
• Attribution toggle with auto-scroll behavior
• BuyBook link with analytics tracking

Components follow established migration patterns and maintain backward compatibility.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

This PR continues the Phase 7.3 migration by moving assignment/book-related content components off styled-components and into plain CSS files, while also modernizing Attribution from a class + connect() to a functional component using Redux hooks.

Changes:

• Migrates Assigned, AssignedTopBar, Attribution, and BuyBook styling from styled-components to co-located plain CSS.
• Refactors Attribution to a functional component with useSelector, useEffect, and useRef/useLayoutEffect.
• Updates Jest snapshots to reflect the new class-based markup and removal of styled-components generated styles.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/app/content/components/Assigned.tsx	Replaces styled-components wrappers with function components + CSS variables/classes.
src/app/content/components/Assigned.css	Adds plain CSS for Assigned button/toast/platform wrapper behavior.
src/app/content/components/AssignedTopBar.tsx	Switches from styled-components wrapper/title to className + CSS variables.
src/app/content/components/AssignedTopBar.css	Adds plain CSS for Assigned top bar styling and breakpoints.
src/app/content/components/Attribution.tsx	Converts to functional component + Redux hooks; replaces styled Details/Summary with native <details>/<summary> and CSS.
src/app/content/components/Attribution.css	Adds plain CSS for attribution container, summary icons, content/link styling, and breakpoints.
src/app/content/components/BuyBook.tsx	Replaces styled-components with class-based markup, CSS variables, and disablePrintClass.
src/app/content/components/BuyBook.css	Adds plain CSS for BuyBook layout and link styling.
src/app/content/components/snapshots/BuyBook.spec.tsx.snap	Updates snapshot output for class-based BuyBook markup.
src/app/content/components/snapshots/Attribution.spec.tsx.snap	Updates snapshot output for new details/summary markup and removal of styled-components CSS output.
src/app/content/components/snapshots/AssignedTopBar.spec.tsx.snap	Updates snapshot output for AssignedTopBar class usage + CSS variables.
src/app/content/snapshots/routes.spec.tsx.snap	Updates assigned route snapshot due to Assigned/Attribution/TopBar markup and class changes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[RoyEJohnson]

This was crazy. So much duplication (now removed).

[Copilot]

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated no new comments.