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

Verbeteren: Alert #981

Closed
14 of 19 tasks
JoeriRoijenga opened this issue Dec 4, 2024 · 2 comments · Fixed by #1070 · May be fixed by #1035
Closed
14 of 19 tasks

Verbeteren: Alert #981

JoeriRoijenga opened this issue Dec 4, 2024 · 2 comments · Fixed by #1070 · May be fixed by #1035
Assignees
@Rerbun

Comments

@JoeriRoijenga
Copy link
Contributor

JoeriRoijenga commented Dec 4, 2024 •
edited by Rerbun
Loading

Omschrijving

De Alert component kan een aantal verbeteringen ondergaan.

Verbeteringen

documentatie verbeteren op basis van template

  1. WCAG eisen toevoegen.
  2. Aangeven dat het om een Rijkshuisstijl of Utrecht component gaat.

Checks

Definition of ready

  • Naam van de component is duidelijk.
  • Doel van component is beschreven.
  • Design is aanwezig.
  • Tokens zijn aanwezig.
  • Waar in de templates wordt deze component gebruikt? Zijn er praktijkvoorbeelden waarin de component al gebruikt wordt?
  • Beschrijving gemaakt van wat er moet gebeuren om de taak succesvol af te ronden.
  • Testcases / stappen om handmatig te testen.

Definition of done

Component

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

Storybook

  • Tenminste 1 default story.
  • States en properties stories.
  • Documentatie is toegepast, check template.

Tests

  • Het component rendert.
  • Tenminste de Basis functionaliteit van het component wordt getest.

Waar komt de component van:

  • Utrecht
  • Utrecht + wrapper
  • RHC
  • Amsterdam
  • Amsterdam + wrapper
@JoeriRoijenga JoeriRoijenga converted this from a draft issue Dec 4, 2024
@Rerbun
Copy link
Contributor

Rerbun commented Dec 4, 2024

In demo implementaties was dit component erg goed te gebruiken 👍

Op 1 situatie na, in deze situatie moest alert meerdere headers, de manier waarop ik dat opgelost heb was wel wat hacky

  <Alert type="warning" headingLevel={4} heading={'De periode om in verzet te gaan is voorbij.'}
      textContent={
          <>
              <Paragraph>
                  U bent te laat om in verzet te gaan. Als u toch nog in verzet gaat, maar geen goede reden heeft waarom u te laat bent, wordt uw verzet 'niet-ontvankelijk' verklaard. De officier kijkt dan niet meer naar waarom u vindt dat de straf onterecht is. De straf blijft dan in stand.
              </Paragraph>
              <Heading level={4} appearance="utrecht-heading-5">Wilt u tóch in verzet gaan?</Heading>
              <Paragraph>
                  Leg hieronder uit waarom u niet op tijd in verzet kon gaan.{' '}
                  {/* Als u bewijzen hebt, voeg die dan toe.*/}
                  De officier beoordeelt uw verhaal en bepaalt of uw verzet toch in behandeling wordt genomen of dat uw verzet 'niet-ontvankelijk' wordt verklaard.
              </Paragraph>
          </>
      }
  />

Achteraf had de 2e heading misschien level 5 moeten worden, maar desondanks is het een beetje gek dat dit rendert als een Paragraph met dáárin een paragraph en een heading en nog een paragraph.

@Rerbun Rerbun moved this from Ready to In Progress in Community Sprint - Rijkshuisstijl componenten Dec 17, 2024
@Rerbun Rerbun self-assigned this Dec 17, 2024
@Rerbun
Copy link
Contributor

Rerbun commented Dec 24, 2024

Ik zal het meeste alvast doen voor deze taak, maar voor de documentatie is #1010 nodig, dus misschien houd ik deze verder open tot de rest ook mogelijk is om te doen

@Rerbun Rerbun mentioned this issue Dec 24, 2024
Draft
@Rerbun Rerbun mentioned this issue Jan 3, 2025
Merged
Rerbun added a commit that referenced this issue Jan 3, 2025
@Rerbun
feat: major update to how documentation is fetched and rendered and m…
45148db 
…ade small fixes to make everything as consistent as possible (#1070)

closes #981 
closes #1010 
also made first steps to use @utrecht/components, but only in storybook
for now (#1009)

- There are a lot of // TODO comments because in a lot of cases the
documentation is not structurized correctly in @utrecht/components.
Wherever it was in the right structure I used the Utrecht documentation
as much as possible (although sometimes they were very lacking in
content, in which cases I skipped them as well)
- I added functionality to packages/storybook/config/preview.tsx to
render links and componentOrigin text that can be added using the
github, figma, nldesignsystem and componentOrigin parameters in
storybook respectively.
- Here is an example of a storybook page where the links are filled with
parameters and the documentation is coming from @utrecht/components:
[Radio
button](https://rijkshuisstijl-community-git-chore-utre-1cc52e-nl-design-system.vercel.app/?path=/docs/rhc-radio--docs)

---------

Co-authored-by: Ruben Smit <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Rerbun Rerbun

Labels
None yet
Projects
Community Sprint - Rijkshuisstijl componenten
Status: Done
Milestone
No milestone
2 participants
@Rerbun @JoeriRoijenga