[RFC] feat(slot): create generic slot component

[bmdalex]

Slot

This PR contains:

• implementation of generic Slot component;
• using it to convert content prop to shorthand slots

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

API Proposal

content prop as shorthand

We are now able to use content prop as real shorthand for our components if it's needed. Here are a couple of scenarios where this is useful:

1. Usage of wrapper shorthand for Input component in #326

2. Usage of content prop for Button component that was transformed to shorthand in this PR:

<div>
  <Button content="Basic" />
  <Button content="Styled" styles={{ color: 'red', background: 'yellow' }} />
  <Button content={{ content: 'Shorthand styled', styles: { color: 'red', background: 'yellow' }}} />
</div>

<div>
  <button class="ui-button" aria-disabled="false">
    <span class="ui-slot">Basic</span>
  </button>
  <button class="ui-button cf cj" aria-disabled="false">
    <span class="ui-slot">Styled</span>
  </button>
  <button class="ui-button" aria-disabled="false">
    <span class="ui-slot cf cj">Shorthand styled</span>
  </button>
</div>

[codecov]

Codecov Report

Merging #335 into master will increase coverage by 0.14%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #335      +/-   ##
==========================================
+ Coverage   89.59%   89.73%   +0.14%     
==========================================
  Files          62       64       +2     
  Lines        1220     1237      +17     
  Branches      179      157      -22     
==========================================
+ Hits         1093     1110      +17     
  Misses        125      125              
  Partials        2        2

Impacted Files	Coverage Δ
src/components/Slot/Slot.tsx	100% <100%> (ø)
src/components/Slot/index.ts	100% <100%> (ø)
src/components/Button/Button.tsx	95.83% <100%> (+0.08%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 14b860e...6da13dc. Read the comment docs.

[mnajdova]

Maybe we can add here some description of the component and why it was introduced. This is not blocking this PR from being merged however.

[bmdalex]

will do, thx