Milestone 2: Adding data-media-background prop

[tingting-lwy]

Milestone 2: Adding the page-color-scheme

• Added the property data-media-background that takes the JSON object MediaBackgroundConfig
• Added MediaBackgroundConfig and its values to MarketplaceView
• Created a group of fields on the Configurator for the data-media-background attribute
• Users can test an image, colors (or multiple), and gradient types and angles

Edge Cases tested:

• an Image URI should take precedence over colors
• if image URI is broken/wrong, fallback color takes over
• if no gradient type is selected and there is multiple colors, no background is used (assumed expected behavior)
• Changing angle or gradient type has no effect on single color or image backgrounds

Here is an example of an image

Here is an example of a singular color:

Here is an example of gradient colors:

Here is an example of gradient colors using other CSS valid values:

[jaxonL]

works as intended, with a minor bug on the generated code.

[jaxonL]

minor nits remaining. overall, seems good to merge.

[jaxonL]

just caught this this time around -- if there are more config props with type = ARRAY, you would have multiple labels with the same id + placeholder test. that wouldn't be good for accessibility issues.

[tingting-lwy]

true! I actually decided I didn't need to ID this label since any labels created by config props with type = ARRAY would then be styled using the selector label rather than creating accessibility issues by potentially using same ids

[jaxonL]

minor comment: if anyone were to add a label element to the configurator, it would be styled using the rules below.