Enhancement[callout component]: add Bucketed callout component to library

[jeanservaas]

trafficstars

Enhancement: the Bucketed callout component

@DianaStanciulescu is currently updating the Gatsby kit and there are several high priority component enhancements that we would like to add to our Gatsby component library.

The specs are below, so this is solely a dev work stream that's needed.

Justification

A variety of the callout component is being used widely in Gatsby sites and occasionally in product, but it does not exist as a component. As a result teams need to modify the callout component to achieve this layout treatment, but more importantly, they don't understand grid use, vertical spacing and type hierarchy with this layout component. Offering this component out of the box will drastically decrease support questions for Gatsby theme.

Some use cases:

https://www.ibm.com/able/ https://www.ibm.com/design/approach/design-thinking/ https://www.ibm.com/design/teams/

Design specs and variants

Ideally this layout configuration can work with or without bucket titles.

1312 Specs

1056 Specs

Tablet

Mobile

Although this is an enhancement of the callout component, I've provided specs at other breakpoints because it behaves differently.

1312

1056

Tablet

Mobile

Sketch file attached

Bucketed callout component copy.zip

This is a brand prioritized issue so that Diana's kit matches what is available in the code

[mjabbink]

@jeanservaas @vpicone moved this to Brand priority. We should get this into upcoming sprints

[sadekbazaraa]

Sweet! Look at those design specs @jeanservaas 👏

[mjabbink]

Beautiful Will be a major addition to GT. Thank you @jeanservaas and @DianaStanciulescu!

[mjabbink]

What is the status on this @DianaStanciulescu @vpicone? My last comment was December 1 2020.

FYI @alisonjoseph

[mjabbink]

@alisonjoseph Can I assume this is in this sprint?

[mjabbink]

@alisonjoseph This is one of those brand items should be addressed.

[therenney]

Will this ever be implemented @aledavila?

[tay1orjones]

@therenney Things keep getting prioritized atop this unfortunately. It's a well defined item that would be a great candidate for contribution though, if you're interested.

I believe @aledavila made something similar to this for the experience matters website homepage, https://w3.ibm.com/design/experience-standards/, but it was a one-off and not added to the theme. It could be a good starting point and then modified to match any variations in the spec listed above.