Paragraph

[Robbert]

Naam

Paragraph

Link naar GitHub Discussion

---

Notities

The text paragraph element <p> should be available in Storybook and in Figma, and should be styleable in CSS.

<p> / .nl-paragraph

Development

CSS

• [ ] margin-block is configurable (WCAG eis 1.4.12)
• [ ] line-height is configurable (WCAG eis 1.4.12)
• [ ] color is configurable (WCAG eis 1.4.3)
• [ ] font-size is configurable (WCAG eis 1.4.4)

Documentatie

UX / visual design

• [ ] WCAG rules for typography
  • [ ] WCAG eis 1.4.3
  • [ ] WCAG eis 1.4.4
  • [ ] WCAG eis 1.4.8
  • [ ] WCAG eis 1.4.10
  • [ ] WCAG eis 1.4.12
• [ ] NL Design System basic theme met sane defaults for:
  • [ ] line-height
  • [ ] margin-block
  • [ ] font-size
  • [ ] color

Developer

• [ ] use <p> for semantic (WCAG)
  • [ ] WCAG eis 1.3.1
• [ ] use lang attribute
  • [ ] WCAG eis 3.1.2

Content writer

• [ ] Maximum text length
• [ ] Language of content is specified WCAG eis 3.1.2

Status definition of done

Help wanted

Dit component bestaat nog niet, maar een component wordt genoemd als 'help wanted' wanneer:

• [x] Staat in de publieke Backlog van NL Design System
• [ ] Er is een rationale opgesteld wat het component is en waarom het nodig is
• [x] Kernteam en community verwachten dat het component voor meerdere organisaties inzetbaar kan zijn
• [ ] De rationale is onderbouwd door gebruikersonderzoek (eigen of van andere design systems)
• [ ] De rationale is door het kernteam gereviewed

Community

Dit component bestaat in de community, om bij NL Design System als 'Community component' genoemd te worden moet het component naast alle 'Help wanted' criteria aan de volgende voorwaarden voldoen:

• [ ] Component implementatie voldoet aan de rationale
• [x] Component is geclaimed door de organisatie in de publieke backlog
• [x] Component heeft de EUPL-1.2 licentie
  • [ ] package.json bevat SPDX-license code "license": "EUPL-1.2"
  • [ ] Git repository bevat EUPL-1.2 tekst in LICENSE.TXT
  • [ ] alle code files bevatten /* @license EUPL-1.2 */ en copyright notice
• [x] Component UX en A11y documentatie heeft de Creative Commons 0 licentie (CC0)
  • [ ] alle documentatie files bevatten <!-- @license CC0-1.0 -->
• [x] Component API's zijn geprefixed met de prefix van de verantwoordelijke organisatie
• [x] Codebase van de component gebruikt linting en automatische code-formatting zoals Prettier
• [x] Component is vindbaar op de NL Design System website
• [x] Component staat in Storybook van de verantwoordelijke organisatie
• [x] Component is opgenomen in de Storybook met alle NL Design System thema's
• [ ] Component is beschikbaar in de Figma bibliotheek van de verantwoordelijke organisatie
• [x] Component is besproken in het UX-overleg en/of tijdens de heartbeat en is klaar om door de community gebruikt te worden
• [ ] Component voldoet aan de Definition of Done van de verantwoordelijke organisatie
• [ ] Visuele regressietests zijn beschikbaar voor het component in de thema-storybook

Candidate

Dit component is opgenomen in de @nl-design-system-unstable organisatie. Het kernteam verwacht dat het component uiteindelijk een Hall of Fame status krijgt, maar kan nog niet garanderen dat API's niet wijzigen of er onverhoopt een ander vergelijkbaar component in de plaats komt. Omdat het component wel door het kernteam onderhouden wordt voldoet het naast de meeste Community DoD eisen al wel aan veel meer criteria voor stabiel hergebruik:

• [x] Community component is ingezet door 2 of meer organisaties
• [ ] Figma component in de NL Design System bibliotheek is in lijn met het component in code
• [ ] Aliassen van (niet) geimplementeerde alternatieve componenten zijn vastgelegd in documentatie
• [ ] Verwijzing naar extern gebruikersonderzoek die tot de keuze van dit component leiden
• [ ] Component heeft documentatie in Storybook over hoe het te gebruiken
• [ ] Accessibility/inclusie toolkit documentatie is beschikbaar voor de overwegingen die op dit component van toepassing zijn
• [ ] Component is geschikt voor internationalisatie
  • [x] Design tokens gebruiken "CSS logical properties" en logical values
  • margin shorthand property alleen gebruiken met enkele value, niet voor meerdere values
  • padding shorthand property alleen gebruiken met enkele value, niet voor meerdere values
  • border shorthand property alleen gebruiken met enkele value, niet voor meerdere values
  • margin-inline-end ipv margin-right
  • margin-inline-start ipv margin-left
  • margin-block-start ipv margin-top
  • margin-block-end ipv margin-bottom
  • padding-inline-end ipv padding-right
  • padding-inline-start ipv padding-left
  • padding-block-start ipv padding-top
  • padding-block-end ipv padding-bottom
  • border-inline-end ipv border-right
  • border-inline-start ipv border-left
  • border-block-start ipv border-top
  • border-block-end ipv border-bottom
  • inset-inline-end ipv right
  • inset-inline-start ipv left
  • inset-block-start ipv top
  • inset-block-end ipv bottom
  • text-align: start ipv text-align: left
  • text-align: end ipv text-align: right
• [ ] Component kan omgaan met verschillende soorten content, zoals heel veel of juist heel weinig tekst etc.
• [ ] Component implementatie is op toegankelijkheid getoetst door leden van het kernteam
• [ ] Semantiek van het component is goedgekeurd door het kernteam
• [ ] Design tokens en API's zijn geprefixed met nl
• [ ] Design tokens volgen conventies
• [ ] Hergebruik van logische common tokens is geïmplementeerd om theming makkelijk te houden.
• [ ] API volgt conventies
• [ ] NPM scope: @nl-design-system-unstable
• [ ] Het component heeft geen organisatie specifieke API's meer, alle API's zijn gebaseerd op een gemeenschappelijke usecase
• [ ] Alle design tokens zijn algemeen nuttig voor de thema's van bestaande publieke organisaties
• [x] Het component is geen monster component waar de documentatie of API's veel te complex zijn. Als nodig wordt de code van het community component opgeknipt en/of versimpeld
• [x] Component werkt in meerdere thema's
• [ ] Component heeft regressietests voor ten minste 2 thema's
• [ ] Changelog wordt gegenereerd
• [ ] Component is in een heartbeat, andere publieke demo of nieuwsbrief getoond

Hall of fame

• [ ] Toegankelijk volgens audit
• [x] algemeen genoeg
• [ ] Richtlijnen voor design tokens invullen
• [ ] Richtlijnen voor toegankelijkheid inzetten
• [ ] Documentatie: Do's en don'ts
• [ ] Documentatie eventueel slecht gebruik met alternatieve component
• [ ] Richtlijnen voor redacteuren
• [ ] meerdere organisaties zijn tevreden
• [ ] meerdere organisaties hebben component in toegankelijkheids audit getest
• [ ] geen known issues voor a11y
• [ ] Risico's m.b.t. beveiliging (security) zijn gedocumenteerd
• [ ] Risico's m.b.t. privacy (AVG) zijn gedocumenteerd
• [ ] npm scope: @nl-design-system
• [ ] Getest met afnemers van design system: designer
• [ ] Getest met afnemers van design system: developer
• [ ] Getest met afnemers van design system: redacteur
• [ ] Community (2+ organisaties) is geswitcht van eigen naar candidate component
• [ ] Semver is goed geregeld
• [ ] Semver linting is 'waterdicht'
• [ ] Figma component is geversioneerd
• [ ] Documentatie over updaten van het Figma component is compleet
• [ ] Webcomponent of verschillende framework componenten beschikbaar
• [ ] Component logica is opgenomen in regressietests

[usethetics]

Figma component containing a regular and a lead paragraph, including a default measure (line-length) and options for closing paragraph (last-of) with additional bottom margin: https://www.figma.com/file/gqQhMe3gj4YlC6JrZOWiCv/?node-id=2374%3A2086

[Robbert]

For the guidelines on the paragraph component we have some things to research:

• [ ] what is the (absolute) minimum font size?
• [ ] what is the optimal minimum and maximum line length in characters, for Dutch?
• [ ] what are optimal minimum and maximum line heights?
• [ ] what are optimal minimum and maximum margins?
• [ ] content guidelines for lead paragraphs
  • [ ] writing effective lead paragraphs
  • [ ] when to use them
  • [ ] when to avoid them
  • [ ] optimum text length

Perhaps we should also find or do some use research regarding effective lead paragraph styling: larger font size, bold, both?