Add Brand Band Component

• Add the Brand Band component as it is in SLDS (gray).
• Allow styling it to look similar to the Mobile1 Lightning Blue theme (i.e. blue background). This ensures teams are using consistent color values.
• This is/will be leveraged by Marketing Cloud. Others (i.e. Commerce Cloud, Integration Cloud) will leverage it too but might need to implement this into their system independently of DSR.

Requirements:

• Use the Brand Band as the basis for this work (https://latest-216.lightningdesignsystem.com/components/brand-band/)

Apply the Following CSS Changes to Change Color:

• element.style is the page background color. For the SLDS example it’s the color of the container.

element.style { background-color: rgb(176, 196, 223); }

.slds-brand-band:before { background-image: url(/assets/images/themes/oneSalesforce/banner-brand-default.png), linear-gradient(to top, rgba(175, 197, 222, 0) 0, #1B5F9E); }

.slds-brand-band:after { background-image: linear-gradient(to bottom, rgba(175, 197, 222, 0) 60%, #AFC5DE); }

End Result:

Image is within SLDS npm modules: /node_modules/@salesforce-ux/design-system/assets/images/themes/oneSalesforce.png

[interactivellama]

@kwilloughby-sf This will go out in the next release.

[kevinparkerson]

@interactivellama UPDATED prop concept:

/**
 * Content to be injected inside inside the brand band, if any
 */
children: PropTypes.node,

/**
 * CSS classes that are applied to the component
 */
className: PropTypes.oneOfType([
	PropTypes.array,
	PropTypes.object,
	PropTypes.string,
]),

/**
 * Id of component, if desired. If not provided an id is automatically generated
 */
id: PropTypes.string,

/**
 * Image of the brand band
 */
image: PropTypes.oneOf(['default', 'group', 'none', 'user']),

/**
 * Size of the brand band. Default is 'medium'
 */
size: PropTypes.oneOf(['small', 'medium', 'large']),

/**
 * Custom styles to be passed to the component
 */
style: PropTypes.object,

/**
 * Custom styles to be passed to the component
 */
styleContainer: PropTypes.object,

/**
 * Different brand band styling
 */
theme: PropTypes.oneOf(['default', 'lightning-blue'])