[V1] Panel

[m-siekaniec]

### Tasks
- [ ] Indicator Position Left/Right
- [ ] Outline & Solid Variants
- [ ] Header States
- [ ] Header Slot
- [ ] Header Actions
- [ ] Header Title Sub-Component (Style)
- [ ] Body Slot
- [ ] Panel Examples

Request Requirements (basics)

• a panel is an accordion like component with more interaction
• A panel is by default not expandable but can be expanded
• it is possible to add actions, badges within the header of the panel
• it's possible to place the expandable icon on the left or the right in de header (define rules)
• there are interactions possible within the 'main'
• ui design for nested panels (layering in contextual tokens)
• panel heading part (colapsed) would be separated from the expandable part with a color (Roald, what do you think?)

### Tasks
- [ ] https://github.com/sl-design-system/components/issues/1574
- [ ] https://github.com/sl-design-system/components/issues/1570
- [ ] https://github.com/sl-design-system/components/issues/1571
- [ ] https://github.com/sl-design-system/components/issues/1572
- [ ] https://github.com/sl-design-system/components/issues/1552
- [ ] https://github.com/sl-design-system/components/issues/1404
- [ ] Add this component in the survey of the RICE pilot (patterns and components part 2)
- [ ] [Panel] Make available in all themes

Provide a general summary of the feature here

In TEAS we are using an element that is very similar to the accordion. I think it would be good if there was also an action available in the collapsed part of the accordion

🤔 Expected Behavior?

Please add the action buttons to the collapsed accordion line

😯 Current Behavior

Currently the collapsed line has only the title and +/- icons.

💁 Possible Solution

No response

🔦 Context

Please see the current design: https://www.figma.com/design/3GuQHINgeaBAtcJrRdfSEA/%F0%9F%91%91-TEAS-Master?node-id=5778-41294&t=5Mjl3h6J2EnVmEmp-4

💻 Examples

No response

🧢 Your Product/Team

TEAS

CFA Interest

• TEAS
• Kampus
• Magister
• NPM NEON
• MY Digital book
• AV4
• ETSL
• GIM

[DanielleRameau]

@marcin-siekaniec we don't think the example showed is an accordion but an expansion panel. Accordions are used to break up a lot of content (a chapter) into different paragraphs. In our opinion, the example you showed is an expansion panel, a stand-alone UI component that is used to show more complex information. We need to create a new component for this, when we send out the survey for patterns and components part 2 we will ask what the interests of other CFA's are for this component.

[m-siekaniec]

OK, thank you :)