Skip to content

🏷️ [#2203] Add NLDS --nl prefix candidate Paragraph as web component#2246

Merged
jiromaykin merged 1 commit into
nlds-para-heading-implementationfrom
feature/2203-nlds-nl-paragraph
Apr 7, 2026
Merged

🏷️ [#2203] Add NLDS --nl prefix candidate Paragraph as web component#2246
jiromaykin merged 1 commit into
nlds-para-heading-implementationfrom
feature/2203-nlds-nl-paragraph

Conversation

@jiromaykin
Copy link
Copy Markdown
Contributor

@jiromaykin jiromaykin commented Feb 24, 2026

Summary

Adding the new NLDS --nl prefix candidate Paragraph as a web component,
and then implementing that in all of the plugins on the Home page, if possible.
If web component is not possible, the HTML version is rendered.

  • keeping Utrecht as 'legacy' styles for now, to be removed later once the 'utrecht-paragraph-small' can be removed and given a new oip-nl modifier.
  • so: -small, -compact and -centered etc. are still mostly utrecht here
  • but -muted is added here as an extra class (without it being needed) just as an example since we need it for other templates
  • there is no muted style in the Home plugin cards in the Figma design, so that's been removed there
  • if there is no HTML template available to add the web component, only Python tags, then we just add the HTML version of the p.nl-paragraph component, like in src/open_inwoner/components/templatetags/string_tags.py

Issue References

Checklist

  • CHANGELOG.rst updated
  • Documentation updated
  • Codecov report reviewed for untested lines
  • Storybook component updated/created
  • Vitest tests added/updated

@jiromaykin jiromaykin moved this to In Progress in Open Inwoner Development Feb 24, 2026
@jiromaykin jiromaykin changed the title [#2203] Add NLDS --nl prefix candidate Paragraph as web component 🏷️ [#2203] Add NLDS --nl prefix candidate Paragraph as web component Feb 24, 2026
@jiromaykin jiromaykin force-pushed the feature/2203-nlds-nl-paragraph branch 2 times, most recently from cb1594e to 297bb33 Compare February 26, 2026 20:42
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Feb 27, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.59%. Comparing base (e6bc8f6) to head (a363a43).

Additional details and impacted files
@@                        Coverage Diff                        @@
##           nlds-para-heading-implementation    #2246   +/-   ##
=================================================================
  Coverage                             92.59%   92.59%           
=================================================================
  Files                                  1216     1216           
  Lines                                 48172    48172           
=================================================================
  Hits                                  44605    44605           
  Misses                                 3567     3567           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jiromaykin jiromaykin force-pushed the feature/2203-nlds-nl-paragraph branch from 297bb33 to ac3c744 Compare March 24, 2026 09:01
@jiromaykin jiromaykin changed the base branch from develop to nlds-para-heading-implementation March 24, 2026 09:02
@jiromaykin jiromaykin force-pushed the feature/2203-nlds-nl-paragraph branch 2 times, most recently from 6e1be29 to 2823bd1 Compare March 24, 2026 19:39
@jiromaykin jiromaykin marked this pull request as ready for review March 24, 2026 19:46
@jiromaykin jiromaykin requested a review from stefrado March 24, 2026 20:19
@jiromaykin jiromaykin force-pushed the feature/2203-nlds-nl-paragraph branch 2 times, most recently from f593860 to 1807c8a Compare March 26, 2026 11:12
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.spec.tsx
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.spec.tsx Outdated
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.tsx Outdated
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.stories.tsx Outdated
Comment thread src/open_inwoner/scss/components/Typography/P.scss
Comment thread src/open_inwoner/cms/banner/tests/test_plugin_banner.py
Comment thread src/open_inwoner/react/components/HomePluginCard/HomePluginCard.tsx Outdated
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.scss Outdated
Comment thread src/open_inwoner/react/components/HomePluginCard/HomePluginCard.tsx Outdated
@jiromaykin jiromaykin force-pushed the feature/2203-nlds-nl-paragraph branch 3 times, most recently from 941c7ad to f63ef9d Compare March 31, 2026 17:00
@jiromaykin jiromaykin requested a review from stefrado March 31, 2026 17:00
Comment thread src/open_inwoner/react/components/HomePluginCard/HomePluginCard.tsx
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.tsx Outdated
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.tsx Outdated
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.tsx Outdated
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.stories.tsx Outdated
Comment thread src/open_inwoner/scss/components/Typography/P.scss
Comment thread src/open_inwoner/scss/components/Typography/P.scss Outdated
Comment thread src/open_inwoner/scss/components/Typography/P.scss
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.stories.tsx Outdated
@jiromaykin jiromaykin force-pushed the feature/2203-nlds-nl-paragraph branch from f63ef9d to a06fa57 Compare April 2, 2026 14:15
@jiromaykin jiromaykin requested a review from stefrado April 2, 2026 16:18
@jiromaykin jiromaykin force-pushed the feature/2203-nlds-nl-paragraph branch 2 times, most recently from d5ea87d to 5da1b48 Compare April 7, 2026 10:25
Comment thread src/open_inwoner/react/components/Paragraph/Paragraph.stories.tsx Outdated
@jiromaykin jiromaykin force-pushed the feature/2203-nlds-nl-paragraph branch from 24e18bd to a363a43 Compare April 7, 2026 12:51
@jiromaykin jiromaykin merged commit c30ccba into nlds-para-heading-implementation Apr 7, 2026
15 checks passed
@jiromaykin jiromaykin deleted the feature/2203-nlds-nl-paragraph branch April 7, 2026 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

PP-324 Update Utrecht Paragraphs to NL prefix components and make web-component

3 participants