refactor: move Text to form-component lib

[adamhaeger]

#18861

Description

Move DisplayText from src/App/frontend/src/app-components/Text to libs/form-component/src/app-components/DisplayText, matching the established DisplayDate migration pattern.

• New DisplayText in libs/form-component: drops the useTranslation hook so iconAltText is a plain string; translation moves to the caller via langAsString.
• layout/Text/TextComponent.tsx updated to import DisplayText from @app/form-component and translate textResourceBindings.title at the call site.
• Added unit tests (DisplayText.test.tsx) and a Storybook story (DisplayText.stories.tsx) mirroring DisplayDate.

Verification

• Related issues are connected (if applicable)
• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced DisplayText component with support for optional icons and accessibility labels.

• Style

  • Updated icon styling with improved spacing and dimensions.

• Tests

  • Added comprehensive test coverage for DisplayText component functionality.

• Chores

  • Reorganised component structure and exports within the form library.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 445a34e5-ee4d-4ec3-b4c2-d7945ecc48c2

📥 Commits

Reviewing files that changed from the base of the PR and between 19983b6 and cfd029d.

📒 Files selected for processing (11)

• libs/form-component/src/app-components/Button/Button.tsx
• libs/form-component/src/app-components/DisplayText/DisplayText.module.css
• libs/form-component/src/app-components/DisplayText/DisplayText.stories.tsx
• libs/form-component/src/app-components/DisplayText/DisplayText.test.tsx
• libs/form-component/src/app-components/DisplayText/DisplayText.tsx
• libs/form-component/src/app-components/DisplayText/index.ts
• libs/form-component/src/app-components/Input/index.ts
• libs/form-component/src/app-components/index.ts
• src/App/frontend/src/app-components/Text/DisplayText.tsx
• src/App/frontend/src/layout/Text/Text.module.css
• src/App/frontend/src/layout/Text/TextComponent.tsx

---

📝 Walkthrough

Walkthrough

A new DisplayText component is added to libs/form-component with type-safe props, CSS styling, comprehensive tests, and Storybook documentation. TextComponent is updated to consume the new component from the library instead of a local implementation, now using language-based alt-text derivation instead of translation keys. Old CSS styles are cleaned up.

Changes

DisplayText Component Migration

Layer / File(s)	Summary
DisplayText component, styles and barrel exports libs/form-component/src/app-components/DisplayText/DisplayText.tsx, libs/form-component/src/app-components/DisplayText/DisplayText.module.css, libs/form-component/src/app-components/DisplayText/index.ts	New DisplayText component with DisplayTextProps (required value, optional iconUrl, iconAltText, labelId) renders an optional icon and text span with aria-labelledby support. CSS module styles icon dimensions. Module barrel exports component and type.
DisplayText tests and Storybook stories libs/form-component/src/app-components/DisplayText/DisplayText.test.tsx, libs/form-component/src/app-components/DisplayText/DisplayText.stories.tsx	Test suite verifies value rendering, conditional icon rendering with alt text, icon omission when absent, and accessibility linkage via aria-labelledby. Storybook defines metadata and four story variants: Preview, WithIcon, WithLabel, EmptyValue.
TextComponent integration with library exports and CSS cleanup libs/form-component/src/app-components/index.ts, src/App/frontend/src/layout/Text/TextComponent.tsx, src/App/frontend/src/layout/Text/Text.module.css	App-components barrel export adds DisplayText re-export. TextComponent imports DisplayText from @app/form-component, adds useLanguage hook, and derives iconAltText from langAsString instead of translationKey. Old .icon styles removed from Text.module.css.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Altinn/altinn-studio#18819: Updates Button.tsx React import statement formatting to TypeScript/semicolon style, matching the formatting change in this PR.

Suggested labels

kind/chore

Suggested reviewers

• phlipsterit
• Magnusrm

Poem

🐰 A wee rabbit hops with glee,
As DisplayText moves swiftly free,
From old paths to the library bright,
With tests and stories shining light,
Language flows through langAsString—
Migration done, the changes sing! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/move-Text-to-app

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[walldenfilippa]

Looks good! 🥳