Phase 4.2: Study Guides UI Migration to Plain CSS

[OpenStaxClaude]

Summary

This PR migrates study guides components from styled-components to plain CSS, following the hybrid approach from PLAIN_CSS_MIGRATION_GUIDE.md. This is Phase 4.2 of the CSS migration work and builds on top of Phase 4.1 (PR #2932).

Progress

✅ Completed:

• StudyGuidesListElement - Individual highlight display with dynamic color-coded borders
• StudyGuidesCTA - Call-to-action banner with buttons and info section

🚧 In Progress / Remaining:

• ShowStudyGuides - Main container with scroll handling
• StudyGuides - Main listing component with nested styling
• Filters - Chapter and color filter dropdowns
• StudyGuidesPopUp - Main popup modal container
• StudyGuidesToasts - Toast notifications

Migration Approach

• Keep theme.ts in JavaScript for type safety and dynamic theme access
• Replace styled-components with plain CSS files imported for side effects
• Bind CSS variables from theme values when needed for dynamic theming
• Convert theme.breakpoints.mobile to standard media queries (@media screen and (max-width: 75em))
• Preserve all print styles, accessibility features, and functionality

Key Features

• Dynamic highlight colors: StudyGuidesListElement binds highlight border colors as CSS variables based on the highlight color
• Theme colors: CTA buttons bind deep green colors from theme
• Responsive breakpoints: Converted to standard CSS media queries
• Print styles: Preserved @media print rules, CTA hidden in print
• Accessibility: Maintained hidden-but-accessible class for screen readers

Related

• Built on top of Phase 4.1: Phase 4.1: Practice Questions UI Migration (Part 1) #2932
• Jira ticket: CORE-1704
• Migration guide: PLAIN_CSS_MIGRATION_GUIDE.md

Test Plan

See comprehensive testing guide in the Jira ticket description. Key areas:

• Study guides modal appearance and functionality
• Highlight listing with correct color-coded borders
• CTA banner styling and responsiveness
• Filters and print functionality
• Responsive design across screen sizes

🤖 Generated with Claude Code

[RoyEJohnson]

Can you figure out which is the right color spec, and why two were put in?
Also look at the other errors; if the "important" is needed, we can put a disabling comment in.

src/app/content/studyGuides/components/StudyGuidesListElement.css
 36:3   ⚠  Unexpected duplicate "color"                         declaration-block-no-duplicate-properties
 66:38  ✖  Unexpected unknown pseudo-class selector ":global"   selector-pseudo-class-no-unknown         

src/app/content/studyGuides/components/StudyGuidesCTA/StudyGuidesCTA.css
 28:20  ⚠  Unexpected !important   declaration-no-important

[OpenStaxClaude]

@RoyEJohnson I've fixed all the CSS linting errors:

Fixed Issues

1. Duplicate color property (StudyGuidesListElement.css:36)

Root cause: During migration, I included both colors from the original styled-component:

• ${textRegularStyle} → color: theme.color.text.default
• Explicit color: theme.color.text.black

Fix: Removed the duplicate. Kept only theme.color.text.black since that's what was effectively applied (the second declaration overrode the first in the original code).

2. Unknown pseudo-class :global (StudyGuidesListElement.css:66)

Root cause: Used CSS Modules syntax (:global()) but this file doesn't use CSS Modules.

Fix: Changed .study-guides-list-element-content :global(.content-excerpt) to standard descendant selector .study-guides-list-element-content .content-excerpt

3. Unexpected !important (StudyGuidesCTA.css:28)

Root cause: Print styles need !important to override other display styles.

Fix: Added stylelint disable comment: /* stylelint-disable-next-line declaration-no-important -- needed to override other display styles in print */

All changes have been pushed to the branch and the linter now passes for these files.

[RoyEJohnson]

I think the test needs to be updated to look for the right thing rather than a Styled.STudyGuidesCTAWrapper.

src/app/content/studyGuides/components/StudyGuidesCTA/index.spec.tsx:8:25 - error TS2307: Cannot find module './styles' or its corresponding type declarations.

8 import * as Styled from './styles';

[OpenStaxClaude]

@RoyEJohnson Fixed the test import error!

Issue

The test was importing from ./styles which no longer exists after the CSS migration:

import * as Styled from './styles';

And then using:

expect(() => component.root.findByType(Styled.StudyGuidesCTAWrapper)).toThrow();

Fix

Removed the styled-components import and updated the test to query by className instead:

expect(() => component.root.findByProps({ className: 'study-guides-cta-wrapper' })).toThrow();

This matches the migration pattern where Styled.StudyGuidesCTAWrapper became <div className="study-guides-cta-wrapper">.

The TypeScript compilation error should now be resolved.