Build slot demo library

[SeamusLeonardHPE]

Continue to work with slot component 

Create mini published library for proof of concept - with a few selected container components:


Card
Popover
Layer center




Use naming conventions & emoji, warnings on the thumbnail to indicate that its a DS test only published library.

@KennyAtHPE
For the library

Create an publish a test library
Populate with container components, using preferred slot method

Insert instanced into a second 'playground file' and share with team.

@luketa8
For the test components

• Define the "container"anatomy via grommet, what is each component at its most basic -
  What properties are handle at this “surface”
(eg most container components are opinionated about radius, elevation, bg color, close button.
  Everything else should be managed in subcomponent(s)
-

• Define where HPE theme has opinions

  eg


  Card HPE must have a semantic title, could have media.
  Look to existing anatomy on DS site and consider how these rules & props can be built into the inner sub component.

eg
Popover - Must be dismissible




For these slot containers, what in HPE guidance would indicate if they should have multi slots (eg card footer)




Suggest names for
a glossary as a staring point for guidance

1- Slot component (Im happy with slot )
2- Slot host component (container, wrapper, parent)
3- Swapped in component


---

Evaluating this should be based on
1- Does it make it easier for us to produce "container components" in future
2- Testing functionality - push changes to a component that has replaced a slot - what other tests are required
3- What is our decision on pre-configuring common use cases -
4- We will need to be comfortable allowing other team to use slots - do we document a usage agreement -
5- If we are using preferred slot for DS approved patterns, how to we educate and showcase usage outside of the DS library

[luketa8]

Adding Slot Demo Library Figma file

[KennyAtHPE]

5/29 update

Next steps + current checklist

Slot component

• Create branch to update styling for slot component
  • Get review
  • Publish changes

Education

• Create the first pass of the education guide for the slot component (new file + video)
  • Get review

User testing

• Create a user testing plan and reach out to stakeholders
  - Stakeholders TBD
• Conduct user testing and get feedback on card, slot component, and education guide
  - Include feedback within this ticket

Component building

• Layer component
• Popover component