fix: header navigation fixes

[HeleenSG]

Changes

• Fixes icon-only elements within header navigations.
• Adds button mixins for consistency and easier implementation of buttons within other components.
• Adds header example with search field (and form)
• Fixes button states (like focus, hover and active state)

This pr doesn't upgrade all components that use buttons yet. As we've decided to create separate pr's for that to keep this pr manageable.

Demo

/components/header-navigation/example-search

Ticket

Closes #561

QA Notes

Please check if:

• There is any weird/unexpected styling behaviour or regressions
• Mixins are set up nicely and follow a logical flow
• Documentation has been properly updated (with correct html examples)

Known issue

• Sometimes the rendering of the page specific styling doesn't work as expected. Resulting in a loss of space between the input field and the tab navigation items. We've looked into this. It's a issue specific to the way the docs are set up and not an issue with the css itself. We're looking to improve the way we show examples for html-components that have a specific place in the page (like a header). So we can remove the need for page specific styling within the docs. For now refresh the page it should show the correct css. We will solve this issue in a separate pr as it is out of scope for this ticket.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarCloud

[HeleenSG]

Reviewed @ppvg's changes. Approved.

[jpbruinsslot]

both @HeleenSG and @ppvg have checked each other's work and I approve this pr on behalf of them

[reinschaap]

I was able to test it today, good work

[ppvg]

Very nice!