We see multiple collisions with generic HTML class names and IDs, inheriting the wrong styles. A good example is the error messages which inherits a background image from Drupal. Or the “success” message after registering with the HUB.
1. Prefix all HTML class and id attributes used in the HUB UIs to avoid collisions with generic names used by themes. Ideally use the 'h5p-hub-*' prefix.
2. The id attributes are ideally generated using an incremental counter to avoid collisions when running multiple instances of the UIs or UI components. Hardcoding an id attribute makes the component non-reusable in most cases.
is this issue both for the content hub and the registration/sharing UI? And should the content hub and the registration have the same prefix: ‘h5p-hub’?
Yes, it is for content-hub + registration/sharing. For naming, it really doesn’t matter, as long as it is a uniqe “namespace“. I would have chosen “h5p-hub“, though, since it is quite short
A bit demanding to review this one , but this is what I found (both for the h5p-hub-client):
Missing prefixed classnames
We can remove the "non-bold"+"h5p-hub-non-bold" classNames completely
theres h5p-hub-hub<name>. It's enough with one hub :)
Hehe understandable. I addressed your issues but in filters bold is the default font-weight for text so I did the opposite and removed the bold classnames.