Draft
Conversation
Collaborator
ghoshArnab
commented
Mar 20, 2026
- Install styled-components v6 + @types/styled-components
- Add tsconfig.jest.json to fix verbatimModuleSyntax incompatibility with ts-jest
- Update jest.config.js to use tsconfig.jest.json for transforms
- Add StatusBadge widget component built entirely with styled-components
- Typed variant (success/warning/error/info/neutral) and size (sm/md/lg) props
- Transient props ($variant, $size) to prevent DOM attribute leakage
- css helper for variant/size style maps
- Migrate SummaryItem from CSS file + inline styles to styled-components
- styled(MenuItem) proves wrapping of MUI/emotion components
- SecondaryText uses transient $hasError prop replacing inline style
- MUI IconButton/Menu coexist unchanged (emotion + styled-components compatibility)
- Add test unit suite for StatusBadge covering rendering, variants, sizes, class injection, and transient prop behaviour
- Install styled-components v6 + @types/styled-components - Add tsconfig.jest.json to fix verbatimModuleSyntax incompatibility with ts-jest - Update jest.config.js to use tsconfig.jest.json for transforms - Add StatusBadge widget component built entirely with styled-components - Typed variant (success/warning/error/info/neutral) and size (sm/md/lg) props - Transient props ($variant, $size) to prevent DOM attribute leakage - css helper for variant/size style maps - Migrate SummaryItem from CSS file + inline styles to styled-components - styled(MenuItem) proves wrapping of MUI/emotion components - SecondaryText uses transient $hasError prop replacing inline style - MUI IconButton/Menu coexist unchanged (emotion + styled-components compatibility) - Add 16-test unit suite for StatusBadge covering rendering, variants, sizes, class injection, and transient prop behaviour
added 2 commits
March 20, 2026 14:44
Extract nested switch statements into applyDateTimeOperator, applyStringOperator, and applyFilterObj helpers. Fixes sonarjs/cognitive-complexity warning in CI.
Replace MUI TextField with styled-components implementation inspired by login.northwesternmutual.com Luna design tokens: - Bottom-border-only input (no full box border) matching Luna form_control - Animated border-bottom transition on focus/hover/error - Design tokens from NM app.css: navy #1f2d46, border #5c697f, focus blue #2d4dc5, error red #c93939, placeholder #9ba7bc - Typed transient props ($hasError, $readOnly) - no DOM leakage - Accessible: aria-invalid, aria-describedby, role=alert on error - Label with required asterisk, helper/error text below input
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.