[core] feat: Section component

[CPerinet]

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1204971662887378

[adidahiya]

@CPerinet I cleaned up some of the code based on my review.

• Instead of "small" appearance, I've switched to using the newer "compact" modifier (this exists for HTMLTable and Tooltip components as well, and is better suited to reduced padding visuals).
• I understand that <Card> is being used inside <Section>, but I feel like it doesn't really make sense to use CardProps here since we're not allowing any of the props which are unique/specific to that component. Better to define SectionProps by inheriting from the same underlying interfaces which CardProps does.
• We might want to consider further breaking down the component to also define a new <SectionHeader> component. This might help to disambiguate some of the prop names (for example, rightElement)
• There are still some edge cases for some combinations of props that need to be ironed out:
  • tabs defined & compact={true}
    
  • tabs defined & collapsible={true}
    

[adidahiya]

Re: edge case where tabs & collapsible are both enabled. We can work around this by making these props mutually exclusive. tabDefinitions={...} collapsible={true} would be unsupported.

Also, I think the collapse feature should actually use the <Collapse> component so that we get the nice transition animation.

[adidahiya]

Note that I updated the docs page a bit and fixed the console error related to duplicate docs headings (you can't have two instances of the same heading in a .md page, like ## Props).

Latest docs preview build here

[adidahiya]

I've removed Tabs support for now. It has some complications which we need to address, and we don't need to implement all the features in one PR. We can bring back that feature in a separate PR.

[adidahiya]

• We might want to consider further breaking down the component to also define a new <SectionHeader> component. This might help to disambiguate some of the prop names (for example, rightElement)

I tried this out and it turns out to be kind of cumbersome to implement. The SectionHeader would need to know a lot of the state that Section has access to, specifically collapsible and isCollapsed. So I think the current approach is fine, at least for now.

[adidahiya]

I prefer to add a "section"-namespaced "collapsed" class name for now rather than a .bp5-collapsed name.

[adidahiya]

@CPerinet for future reference: styling of example content should be done in CSS like this