feat(components): add post-button webcomponent

[Meierschlumpf]

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 643d971409b4588fca90334e4b13657ee2fecb0b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[gfellerph]

Thanks @Meierschlumpf for the initiative. Please mark the PR as ready for review when you're ready for the first feedback 🤓

[Meierschlumpf]

I've got two questions regarding the implementation:

1. How to deal with class names? should we just forward them? (Especially for the full width example)
2. How do we deal with buttons that are used as a tags or that are using custom components like Link in NextJS? Do we just not support them through this component as for example loading will not be necessary for links?

[gfellerph]

I've got two questions regarding the implementation:

1. How to deal with class names? should we just forward them? (Especially for the full width example)

Class names should not be forwarded through the web component as this might lead to very unexpected results (global styles will not be available in shadow dom). They should apply to the custom element itself. As for a full-widht button, the best would be to apply utility classes like <post-button class="w-100"> (https://design-system.post.ch/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width).

2. How do we deal with buttons that are used as a tags or that are using custom components like Link in NextJS? Do we just not support them through this component as for example loading will not be necessary for links?

The web component can't support <Link> in React or any comparable concept since it's meant to be framework agnostic. In the react case, I don't think it's possible to define what element the component should render, in other cases it might be configurable. When it's not, it might be possible to use the HTML/CSS version that just needs to add classes to the <Link> component. If even that's not possible, then the project using this component has to find another way to style it according to the Design Guidelines.

[Meierschlumpf]

Okay not sure if the way I did it now is how you like it, if not can you let me know. I think in general the pull request would now be ready for it's first review

[swisspost-bot]

Hey @Meierschlumpf, we discussed this PR yesterday and came to the conclusion, that implementing a web component button at this time introduces too much complexity while solving hardly any problems that could not be solved with a standard <button>. On the contrary, adding such a component opens a lot of questions around accessibility that are otherwise just working when using standard HTML. Thank you for your contribution in any case. I hope it's ok for you if we close this PR, otherwise please feel free to reach out.