Style variations
Style variations allow for developers to define different versions of a component to be used. Style variations may be defined in the global configuration file or in a configuration file colocated with the component. A variation may be selected by editors in Brightspot, or a developer can use them to provide a default rendering strategy using Contextual rendering.
The following example registers FancyPromo as a style variation for the Promo component.
{
"styles": {
"/core/promo/Promo.hbs": {
"templates": [
{
"displayName": "Fancy Promo",
"example": "/core/promo/FancyPromo.json"
}
]
}
}
}
In this scenario, FancyPromo usually points to a dedicated template for rendering. It may include different styling or behaviors than the original Promo component.
Hiding style variations
Sometimes you need to create a Style Variation to support Contextual rendering without allowing editors in Brightspot to select the Style Variation manually.
To do this, you add a hidden flag which indicates to Brightspot not to provide this as an editorial option.
{
"styles": {
"/core/promo/Promo.hbs": {
"templates": [
{
"hidden": true,
"displayName": "Fancy Promo",
"example": "/core/promo/FancyPromo.json"
}
]
}
}
}