Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Component: Paragraph #115

Open
16 of 89 tasks
Robbert opened this issue Apr 22, 2021 · 2 comments
Open
16 of 89 tasks

Component: Paragraph #115

Robbert opened this issue Apr 22, 2021 · 2 comments
Labels
component Contributor/Utrecht designer toolkit Figma component Reusable Figma library component available
Projects
Components
Milestone
Candidate component

Comments

@Robbert
Copy link
Member

Robbert commented Apr 22, 2021 •
edited

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

<p> / .nl-paragraph

Development

CSS

Documentatie

UX / visual design

Developer

Content writer

Status definition of done

Help wanted

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

  • Staat in de publieke Backlog van NL Design System
  • Er is een rationale opgesteld wat het component is en waarom het nodig is
  • 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
  • Component is geclaimed door de organisatie in de publieke backlog
  • 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
  • Component UX en A11y documentatie heeft de Creative Commons 0 licentie (CC0)
    • alle documentatie files bevatten <!-- @license CC0-1.0 -->
  • Component API's zijn geprefixed met de prefix van de verantwoordelijke organisatie
  • Codebase van de component gebruikt linting en automatische code-formatting zoals Prettier
  • Component is vindbaar op de NL Design System website
  • Component staat in Storybook van de verantwoordelijke organisatie
  • Component is opgenomen in de Storybook met alle NL Design System thema's
  • Component is beschikbaar in de Figma bibliotheek van de verantwoordelijke organisatie
  • 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:

  • 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
    • 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
  • 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
  • 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
  • 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
@Robbert Robbert added this to Under Development in Components Apr 22, 2021
@Robbert Robbert moved this from Under Development to Community Development in Components Apr 22, 2021
@Robbert Robbert changed the title Component: paragraph Component: Paragraph Apr 22, 2021
@Robbert Robbert mentioned this issue May 5, 2021
Open
@Robbert Robbert added this to the Rich text components milestone May 5, 2021
@Robbert Robbert mentioned this issue May 22, 2021
Open
@usethetics
Copy link

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

@usethetics usethetics added the Figma component Reusable Figma library component available label May 3, 2022
@Robbert
Copy link
Member Author

Robbert commented Jul 6, 2022 •
edited

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?

@Yolijn Yolijn assigned jeffreylauwers and Yolijn and unassigned jeffreylauwers and Yolijn Nov 8, 2022
@Yolijn Yolijn removed this from the Basic rich text components milestone Oct 13, 2023
@Yolijn Yolijn mentioned this issue Oct 17, 2023
Closed
@Robbert Robbert added this to the Candidate component milestone Feb 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component Contributor/Utrecht designer toolkit Figma component Reusable Figma library component available
Projects
Componenten Figma Bibliotheek
Status: Done
Components - 1 - Help Wanted
Status: No status
Components - 2 - Community
Status: No status
Components - 3 - Candidate
Status: No status
Components - 4 - Hall of fame
Status: No status
NL Design System componenten
Status: 🕵🏻‍♂️ Exists in the wild
Components
Distributed Development
Milestone
Candidate component
Development

No branches or pull requests
4 participants
@Robbert @usethetics @jeffreylauwers @Yolijn