feat(factories): createShorthandFactory API update and removing HTML factories

[bmdalex]

feat(factories): createShorthandFactory API update and removing HTML factories

This PR focuses on:

• removing regular HTML factories from lib/factories.tsx
• updating createShorthandFactory API to use mappedProp as string instead of mapValueToProps function
• adding Slot.create and Slot.createHTMLElement functions
• updating usage
• adding UTs

TODO

• Conformance test
• Update the CHANGELOG.md

API Proposal

import { createHTMLInput } from 'src/lib'

// usage
createHTMLInput(
  'text',
  { defaultProps: { ... }, overrideProps: { ... } }
)

New

import Slot from 'src/components/Slot'

// usage
Slot.createHTMLElement(
  shorthandProp,
  { defaultProps: { as: 'input', ... }, overrideProps: { ... } }
)

The advantages of the new API is that it will create a Stardust Slot component and render it as an input element (see as property in the usage), which means it will have all Stardust features for:

• behavior
• accessibility
• styling

[mnajdova]

Just additional thought. It would be really beneficial if the user can use the Slot as any other stardust component, because there will be out of the box support for styles, variables, rtl etc. Meaning in any place, where at this moment we are using div in the prototypes, we would use the Slot component.

[bmdalex]

@mnajdova
totally agree on that but I need some evidence (through user scenarios) that there is a real need for it; is there anything preventing the user to do that now? or is it just the fact that we don't export Slot in index.tsx?

[codecov]

Codecov Report

Merging #376 into master will decrease coverage by 0.02%.
The diff coverage is 97.61%.

@@            Coverage Diff             @@
##           master     #376      +/-   ##
==========================================
- Coverage   88.38%   88.36%   -0.03%     
==========================================
  Files          41       41              
  Lines        1421     1418       -3     
  Branches      206      206              
==========================================
- Hits         1256     1253       -3     
  Misses        161      161              
  Partials        4        4

Impacted Files	Coverage Δ
src/components/Accordion/AccordionTitle.tsx	65% <100%> (ø)	⬆️
src/components/Popup/PopupContent.tsx	100% <100%> (ø)	⬆️
src/components/Chat/ChatMessage.tsx	96.29% <100%> (ø)	⬆️
src/components/Segment/Segment.tsx	100% <100%> (ø)	⬆️
src/components/Input/Input.tsx	100% <100%> (ø)	⬆️
src/components/Icon/Icon.tsx	84% <100%> (ø)	⬆️
src/components/Text/Text.tsx	100% <100%> (ø)	⬆️
src/components/Form/FormField.tsx	100% <100%> (ø)	⬆️
src/components/Slot/Slot.tsx	100% <100%> (ø)	⬆️
src/components/Header/HeaderDescription.tsx	100% <100%> (ø)	⬆️
... and 13 more

---

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 267b46a...47a59dc. Read the comment docs.

[mnajdova]

The benefit is that there will be out of the box support for styles, variables, rtl etc, which is very important. Otherwise, using divs, labels and any other HTML elements doesn't support this. I already used the Slot in some of the prototypes and I consider it really valuable from user's perspective. Not sure that now the user can use the Slot from the library as we don't export it as a regular component.

[bmdalex]

In reply to @mnajdova 's comment, do we want to expose the Slot component as a component to users?

@levithomason @kuzhelov

[levithomason]

Merge after removing Slot.createHTMLElement() 👍