Add customized expansion panel

[LibbyUX]

Please add our module headers to Storybook. This is a common pattern emerging across all of our interactive UIs:

• Design System Repo
• HRA Components

Anatomy

• Always: Text string for the title
• Sometimes: Leading icon
  • If so, always: Expand/collapse icon button which will expand or collapse the module.
• Sometimes: Trailing icon 1
  • Generally the "More" icon button, but not always
• Sometimes, but rarely: Trailing icon button 2

Styling Notes

• Generally, Label Large is used. However, other label fonts need to be easily switched out on an instance specific basis.
• Spacing is usually always 4px between elements, but it needs to be flexible for rare instances.

Interactions

See micro tooltips at #676

• Icon buttons in module headers will always have micro tooltips labeling what they do (for example: More, Expand, Collapse)
• Sometimes the title will also have a micro tooltip

Approved example UIs

• CDE
• FTU Explorer
• EUI

[LibbyUX]

@axdanbol, @bhushankhope - Per our conversation today, I will repurpose this issue for our custom expansion panel. I will comment with all new details shortly and mark it back to ready for dev on the status when ready. Thanks for everything!!!

[LibbyUX]

Ready for dev: Expansion Panel

@axdanbol, @bhushankhope & I discussed today the need for a customized expansion panel. This is due to the custom nature of our expansion panel headers. Please let me know if you have questions, and thanks for everything!

Figma

• Design System Repo
  • Expansion panel headers
  • Expansion panels
• HRA Components