Add 'With icon' variant of accordion

[maryshak1996]

I'm not sure if this isn't a variant of the 'accordion' or if it's more a variant of the 'expandable' component, but I wanted to contribute this concept that we are using in our console landing page templates (having it be a PF component would make it even easier for folks to adhere to our landing page guidance).
Several examples of usage for this component can be seen in this Sketch here. Here is the component itself, consisiting of ...

1. Relevant icon
2. Toggle header
3. Expandable content
4. (Optional) Right-aligned quick action in the toggle header

[andrew-ronaldson]

Thanks for this Mary. I see this as a variant but I'll look more closely at your Sketch file. Are the newly added icons just a visual feature or are they clickable? Saw the blue and brain went to a link.

[maryshak1996]

@andrew-ronaldson They aren't clickable, but rather a stylistic decision to add some visual interest since this pattern will be used on ConsoleDot to show key features and use cases of a service (so we want to add some visual weight there)

[andrew-ronaldson]

@mcoker any thoughts on this addition to the component? Seems doable as an optional feature.

[mcoker]

I can't see the sketch file, but the screenshot looks like an expandable data-list and table, minus the blue border on the left. That border used to be on tables/data-lists, but it was removed.

Adding an icon would be really straight forward, it could be as simple as a prop on an <AccordionItem />, and we just add a new element to support it for spacing/alignment.

Adding additional actions is a bit of a bigger ask since in the accordion, all of the styling on the toggle is on a <button> that serves as the toggle. The actions would need to go beside the toggle, but the toggle should still have some styles on interaction, even when interacting with the adjacent actions, similar to a menu item with actions.

[andrew-ronaldson]

Correct me if I'm wrong @maryshak1996 but I think this seems like a prop that adds a decorator which is separate from any actions so it would just follow the accordion button. Maybe this would need a tooltip to identify the icon as a specific service?

[maryshak1996]

hey yes that's correct @andrew-ronaldson :) it's just a decorator icon! I don't even think it would need a tooltip since the text next to it would provide that context

[mcoker]

@andrew-ronaldson @maryshak1996 ah - just an icon like this? https://codesandbox.io/s/naughty-nova-d8tgl7?file=/index.html

[maryshak1996]

@mcoker yup exactly! If it was possible to choose which side (left or right) the expandable icon could be located on the accordion toggle that would be great, but definitely not a hill I'm going to die on! When the accordion is at full-width, it feels like the expandable toggle is pretty far away from the title it's expanding is all.

[mcoker]

@maryshak1996 cool! @andrew-ronaldson both of those enhancements should be pretty straight forward.

[andrew-ronaldson]

@lboehling @blfetche do we want to get this in the penta work?