Progress list

[Rerbun]

Omschrijving

• Bolletjes met getallen om weer te geven hoe ver iemand is in een wizard/beslisboom.
• Den Haag component (@gemeente-denhaag/process-steps -> Status) met extra styling

Links

• Community component: https://www.nldesignsystem.nl/progress-list
• Figma Den-Haag: https://www.figma.com/design/JpoY3waVoQGlLQzQXTL9nn/%F0%9F%8C%BB-Den-Haag-Design-System?node-id=16469-107354&node-type=frame&t=PAhIbIuOHo8Gvdt7-0
• Figma RHC: https://www.figma.com/design/txFX5MGRf4O904dtIFcGTF/NLDS---Rijkshuisstijl---Bibliotheek?node-id=12244-215&node-type=canvas&t=w1iOOFxr4QUJBEvp-0
• Template: -
• Discussions: https://github.com/orgs/nl-design-system/discussions/250
• Den-Haag storybook: https://nl-design-system.github.io/denhaag/?path=/docs/css-process-steps-status--docs
• NPM: https://www.npmjs.com/package/@gemeente-denhaag/process-steps

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 (deliverables).
• 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.
• Accessiblity checks slagen.

Tests

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

[Rerbun]

Voorbeeld implementatie:

// React implementatie
import { Status as ProgressSteps } from '@gemeente-denhaag/process-steps';

<ProgressSteps
    steps={steps.map((step, i) => ({
        ...step,
        key: step.title,
        id: step.title,
        marker: i + 1,
        status: i < currentStep ? 'checked' : (i === currentStep ? 'current' : undefined) }))}
/>

// Styling
.progress-content-wrapper {
  padding: 1rem;
}

.progress-content {
    grid-area: progress;
    border-inline-end-color: black;
    border-inline-end-style: solid;
    border-inline-end-width: 1px;
}

Tokens:

"denhaag": {
        "process-steps": {
            "step": {
                "heading": {
                    "checked": {
                        "color": {
                            "value": "{custom.color.green}",
                            "type": "color"
                        }
                    },
                    "not-checked": {
                        "color": {
                            "value": "hsl(0 0% 43%)",
                            "type": "color"
                        }
                    },
                    "current": {
                        "color": {
                            "value": "{custom.color.primary}",
                            "type": "color"
                        }
                    }
                }
            }
        },
        "step-marker": {
            "checked": {
                "background-color": {
                    "value": "{custom.color.green}",
                    "type": "color"
                },
                "color": {
                    "value": "{custom.color.wit}",
                    "type": "color"
                }
            },
            "current": {
                "background-color": {
                    "value": "{custom.color.primary}",
                    "type": "color"
                },
                "border-color": {
                    "value": "{custom.color.primary}",
                    "type": "color"
                }
            },
            "connector": {
                "checked": {
                    "outline-color": {
                        "value": "{custom.color.green}",
                        "type": "color"
                    }
                }
            }
        }
    },