feat: adding customization parameter

[Jakub007d]

As part of RHCLOUD-44331 Adding customization parameter that can be used by widgetized layout to correctly set the scope, classnames and ouiaID to the widgets so they are correctly rendered.

[Hyperkid123]

Scope is a specific Scalprum parameter. Can't we simply send only the className? Why do we need to scope in the ouiaID?

I think we also needed another class name on the CardBody element.

[Jakub007d]

Im not sure if it is needed but i wanted to keep the same ouiaID as in the old widget configuration. Currently in the console there is f.e data-ouia-component-id="landing-exploreCapabilities-widget" and when i do not add the scope there it would be data-ouia-component-id="exploreCapabilities-widget"

also i need to pass the scope because for the Card classname i need to add only f.e. landing (which is in this context the scope) but in the ClassBody i need to pass the className in this format ${scalprumWidget.scope}-${widgetType} <- this is sent from the widgetLayout. This way i will have the f.e. landing-exploreCapabilities

I can rename the parameters to CardClassName and CardBodyClassName or something similar WDYT ?

[Hyperkid123]

Im not sure if it is needed but i wanted to keep the same ouiaID as in the old widget configuration.

This should not be the target. We can't enforce HCC-specific requirements to a generic extensions. Its ok if it changes, we can update our tests.

but in the ClassBody i need to pass the className in this format

Then we should pass two separate class name configurations. ONe for the overall wrapper and for the card body. Two different params for classnames.

type foo = {
   config: {
     wrapperProps: {
        className?: string
     }, // whatever the wrapper element is "WrapperProps"
     cardBodyProps: CardBodyProps // omit stuff we don't want to be configurable
   }
}


<CardBody {...cardBodyProps} className={clsx('default', cardBodyProps.className)} />

There is no reason why we can't open up the interface a bit. Its innevitable that we would have expose additional props via the config anyway.

[Jakub007d]

I have renamed the two parameters let me know if it is now Ok with you

[Jakub007d]

Ok im going to update it the way you proposed thanks :D

[Jakub007d]

I have updated it please check if it is now Ok or if i should add something to omit or change something. I tested it with the widget-Layout and it works and even for some reason the icons i mentioned to you earlier that had different sizes now works and the widgets looks 1:1

[github-actions]

🎉 This PR is included in version 1.0.0-prerelease.2 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀