feat(button): HTML element implementatie (#784)

[eslook]

Naar de instructies in de issue, aan de hand van de CSS die wij hebben, en vervolgens vergeleken met Utrecht.

---

Stories in Storybook:

• enkel voorbeeld van button
• enkel voorbeeld van input type="button"

Stories in Storybook Test:

• uitgebreid hergebruikt, behalve dingen die niet relevant zijn (Subtle, Primary, etc) of niet kunnen in Storybook zonder classes (:hover, :active, etc).
• aantal stories toegevoegd specifiek voor HTML

---

Daarnaast adhv de issue ook nl-button--submit toegevoegd (in CSS, Test, React, Stories). Deze moet nog even besproken worden met Robbert of het zo de bedoeling is. Dit stond in de issue, maar niet in onze acceptatiecriteria, en dan zou er ook nog een token missen / moeten we beslissen of het hardcoded CSS is of niet.

✅ Die willen we toch niet! Verwijderd.

---

Voor de mixin nl-button--html heb ik uitgebreider gewerkt dan Utrecht: Utrecht styled maar 1x op inputs zowel als button, en verder enkel op de button. Ik heb op zowel de inputs als de button gestyled.

---

Daarnaast gebruik ik :where zoals we ook doen in de rest van onze Button CSS. Utrecht doet dit niet.

---

De stories die hergebruikt zijn, weergeven hun naam in de Storybook Sidebar als de const name in plaats van de name property. Lijkt altijd zo te gaan, ondanks wat het internet zegt. Uitgeprobeerd:

import { Default as DefaultStory } from './button-default.stories';
import * as defaultButtonStories from './button-default.stories';
console.log('names', defaultButtonStories.Default.name, DefaultStory.name);

Beiden geven "Button".
Maar in de Storybook Sidebar krijg ik altijd "Default":

export const Default = defaultButtonStories.Default;

export const Default = {
...defaultButtonStories.Default,
name: DefaultStory.name || 'oh no'
};

export const Default = {
...defaultButtonStories.Default,
name: defaultButtonStories.Default.name || 'oh no'
}

Soms lijkt dit wel goed te gaan in de normale Storybook, bijvoorbeeld voor de "Volle Breedte" story.

---

Daarnaast heb ik een button-html.tsx in de storybook-test gezet, om een component te maken welke button rendered met alle gewenste attributen, zonder alle extra functionaliteiten en classes. Is dat gewenst zo, of liever de Button component wrappen en de classes eraf strippen?

---

In button.stories.tsx heb ik de stories met custom render uitgewerkt zodat het werkt met de ingestelde button in de meta ipv altijd de Button zoals geimporteerd in button.stories.tsx. Dit helpt me met Stories die de React Button gebruiken versus de HTML Button gebruiken. Dit is afgekeken van hoe we het ook voor Link en Mark hebben gedaan.

---

In de templates heb ik alvast standaard de --html suffix toegevoegd.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
candidate	Ready	Preview, Comment	Dec 19, 2025 10:59am
candidate-storybook-non-conforming	Ready	Preview, Comment	Dec 19, 2025 10:59am
candidate-storybook-test	Ready	Preview, Comment	Dec 19, 2025 10:59am
evil-storybook	Ready	Preview, Comment	Dec 19, 2025 10:59am

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (5836aaa) to head (fc54184).
⚠️ Report is 11 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #831   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           28        28           
  Lines          310       312    +2     
  Branches        52        52           
=========================================
+ Hits           310       312    +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
2.0% Duplication on New Code

See analysis details on SonarQube Cloud