Paragraph

[jeffreylauwers]

We willen graag meer leren over het Paragraph component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library. Al zal dat voor de Paragraph nogal logisch aanvoelen, we willen het component toch dezelfde behandelijk geven als elk ander component.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Paragraph

Doel

Toont een alinea aan tekst.

Gerelateerde componenten

Lead Paragraph, Rich Text Content, Strong

Richtlijnen

Acceptatiecriteria: NL Design System Acceptatiecriteria voor Paragraph

Onderzoek

Line Length Readbility - Baymard Institute
Artikel over een onderzoek naar de ideale regellengte.

Line length revisited: following the research - Design regression
Artikel over een onderzoek naar de ideale regellengte.

Heydon Pickering post op Mastodon
Over het gebruik van px en relatieve waardes voor font size.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma - Typography
• Figma - Paragraph
• Github

---

Screenshots / Varianten

Storybook
Default

---

Notities

• Responsive gedrag van fontsize obv clamp en calc in CSS. Hierover heeft Vincent ook verteld tijdens een Heartbeat.
• Opties voor 'Large' en 'Small'. 'Large' ondergebracht bij Lead paragraph.
• Storybook component biedt de mogelijkheid om de kleur om te keren bij een donkere achtergrond.
• Figma component biedt de mogelijkheid voor spacious en compact weergave.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP

---

Screenshots / Varianten

Storybook
Default

---

Notities

Opties voor 'Lead' en 'Detail Small'. 'Large' ondergebracht bij Lead paragraph.

[jeffreylauwers]

DUO

• Documentatie website
• Github

---

Screenshots / Varianten

Documentatie website

Default

---

Notities

• Geen specifiek component of css class voor de paragraaf. Er is wel een 'Header paragraph' (ondergebracht bij Lead paragraph) vandaar dat de standaard paragraph hier is opgenomen.

[jeffreylauwers]

Open Formulieren

• Storybook

---

Screenshots / Varianten

Storybook

Plain

---

Notities

Geen specifiek component of css class voor de paragraaf. Er is wel een 'Body' component met een modifiers onder andere 'Big' en 'Small'. 'Big' (ondergebracht bij Lead paragraph) vandaar dat de 'Plain' paragraph hier is opgenomen.

[jeffreylauwers]

Open Gemeenten

• Documentatie website - Standaardpagina
• Patternlab

---

Screenshots / Varianten

Patternlab

Bodytext

---

Notities

• Optie 'Intro-text' ondergebracht bij Lead paragraph.

[jeffreylauwers]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook
Default

---

Notities

• Wordt 'Default' genoemd in Figma.
• In het Figma file wordt vermeld dat een paragraaf over maximaal 8 kolommen van het grid mag lopen.
• Optie 'Lead paragraph' ondergebracht bij Lead paragraph.

[jeffreylauwers]

RVO

• Storybook - Demo content pagina
• Storybook - Text helpers
• Figma

---

Screenshots / Varianten

Storybook
Paragraph Medium

---

Notities

• Bij Demo contentpagina en Figma opties voor grootte: Large (rvo-paragraph--lg), Medium (rvo-paragraph--md) en Small (rvo-paragraph--sm).
• Optie 'Large' ondergebracht bij Lead paragraph.
• Aanvullende Text helpers opties voor grootte: sm/md/lg/xl.

[jeffreylauwers]

Utrecht

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook
Default

---

Notities

• Documentatie website bevat uitgebreide richtlijnen.
• Opties voor 'Lead' en 'Small print'. 'Lead' ondergebracht bij Lead paragraph.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Paragraph op het Community bord

[jiromaykin]

Wellicht overbodige aanvulling maar behalve een standaard paragraaf heeft OIP/open-inwoner nog 'modifiers' dus daar maken we onze eigen afwijkende styling, en soms eigen design-tokens van.
Het betreft alleen verschillen in styling, dus niet in structuur, als verschillend van de standaard 'utrecht' paragraaf, als modifiers hebben wij (nu nog): --compact, --small, --muted, --centered
Maar we hebben ook allerlei unieke paragrafen binnen grotere 'molecule/organism' componenten.
Zoals de kleinere paragrafen binnen tabellen e.a. overzichten of error meldingen in de document-upload component, of de paragraaf in een Tab kolom zoals <p class="tab-column__paragraph">.

Het is nu nog aan verandering onderhevig, maar hier is alvast nieuwe CSS te zien:
https://github.com/maykinmedia/open-inwoner/pull/1215/files#diff-e90221354759ce160863b0106bfb76069bb4121659733cf775bb37a9b9ad44ea

Als gemeenten hun eigen design-tokens in ons project zouden laden, in de toekomst, dan zijn de afwijkende OIP tokens/stylingen wel nog via de gegenereerde CSS te customizen. Maar alle componenten overerven i.e.g. de body font-stijlen dus die veranderen altijd wel mee.

[Robbert]

@jiromaykin Heel interessant!

Deze compact variant die direct onder een fieldset > legend staat: deze paragraph zou misschien zijn speciale look kunnen krijgen als 'ie in een form-field-description staat? Is er een standaard styling voor "helper tekst"? Of verschilt de styling van "helper tekst" per comonent? https://github.com/maykinmedia/open-inwoner/pull/1215/files#diff-81e4cb63c2dc557c11c4b2d61fd5021b651d52838f2bacf059f21966d7a0294bR24

[jiromaykin]

Die 'help_text' is eigenlijk een Django specifieke term die idd. per component verschilt en meestal in de Admin gebruikt wordt.
Er is wel wat voor te zeggen om minder modifiers te gebruiken en de styling op de parent componenten te zetten ja (als dat is wat je bedoelt). Maar sommige styling zou ik liever 'project overkoepelend' willen eigenlijk, zoals --muted of --small, zodat de paragrafen herbruikbaar zijn.

[jeffreylauwers]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Paragraph op het Candidate bord