new expandable component

[mirnawong1]

this pr creates completes this asana task: https://app.asana.com/0/1200099998847559/1206422502609164/f and creates an expandable component similar to notion toggles. it should:

1. display the expanded content just looks like the other content on the page (ie no box border and no color)
2. make the alt_header inkable like a section title

we can use the following compoent to use it:

<expandable alt_header="add your info here">
add your content here
</expandable>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-getdbt-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 15, 2024 4:34pm

[mirnawong1]

adding the add'l orange arrow color requested in the asana ticket:

and loom explaining here: https://www.loom.com/share/6ce68b13f2eb49b4b899dfd38ce6c3b3?sid=ccfb843d-0020-424c-9807-a38d6f734fa6

[JKarlavige]

Great work on this @mirnawong1! Just have a few small requested edits and left comments in those sections. Let me know if you have any questions with those!

[JKarlavige]

The content within the toggle aligns slightly more inward than the alt_header text. Can we adjust the styles to align the content with the header, similar to stripe's docs?

Also, just a heads up if we change any styles here, they will affect all elements on the page which have these classes. That means if the FAQs component is used on the same page as this expandable component, there might be conflicting styles.

It would be best to scope these styles specifically to this expandable component. Since the expandableContainer class wraps all other elements. The easiest way to scope the styles to this component is by prefixing the classes in this css with .expandableContainer, for example: .expandableContainer :local(.body). I'd recommend doing this for all css declarations in this file.

[mirnawong1]

thank you so much @JKarlavige ! made that change!

[mirnawong1]

thanks so much @JKarlavige ! will review this 🙏

[mirnawong1]

hey @JKarlavige and @nghi-ly - ready for rereview - thank you for the feedback!

[nghi-ly]

@mirnawong1 : feel free to merge!

[mirnawong1]

i'm merging this now @nghi-ly and @JKarlavige ! will look to see if its possible to add the lifecycle pill to this next week