Rich text (vriendjes spacing system)

[AlineNap]

Omschrijving

Vriendjes spacing systeem. Kunnen wij dit ook toepassen op mijn aansluitingen?

Zie utrecht: https://nl-design-system.github.io/utrecht/storybook/?path=/story/css_css-rich-text--default

Definition of ready

• Code check op community component gedaan door lux devs
• Stijling check op community component gedaan door Aline
• Plan voor missende features of bugs van het community component beschreven in het ticket
• Component tokens zijn beschikbaar
• Ticket doorgenomen met Vlad & Mark

Definition of done

Component

• Component is beschikbaar in de index
• Design tokens worden gebruikt

Storybook

• Playground story
• States en properties stories
• Korte beschrijving van het component
  • Wat doet het
  • Basis van het component (bijv Utrecht)
  • Aanpassingen en/of uitbreidingen
  • Relatie met andere componenten (bijv. Form field label en Form field)

Tests

• Het component rendert
• Aanpassingen en/of uitbreidingen werken (zie ook Testing components)
• Visual regression test (door LUX)

Links

• Component:
• Figma:
• Community component:
  • CSS:
  • React:
  • Code:

[AlineNap]

Stijling review

• Samen met dev goed bekijke, maar denk dat het goed kan werken.
• Dit component vult de margin in van een component doormiddel van de tokens die bij rich text horen.
• Bekijk de spacing matrix: https://docs.google.com/spreadsheets/d/1vqok2hIB-eOCIVhwhx3XSysym-dzNNXcWcJq9_gnntM/edit?gid=0#gid=0

Hier alvast de tokens met dezelfde waarde als bij RHC om mee te spelen.

{
  "utrecht": {
    "rich-text": {
      "stranger": {
        "margin-block-end": {
          "value": "{lux.space.400}",
          "type": "spacing"
        }
      },
      "acquaintance": {
        "margin-block-end": {
          "value": "{lux.space.200}",
          "type": "spacing"
        }
      },
      "friend": {
        "margin-block-end": {
          "value": "{lux.space.100}",
          "type": "spacing"
        }
      },
      "best-friend": {
        "margin-block-end": {
          "value": "{lux.space.50}",
          "type": "spacing"
        }
      },
      "confidant": {
        "margin-block-end": {
          "value": "{lux.space.0}",
          "type": "spacing"
        }
      }
    }
  }
}