Editable Fields Refactor

[tinkertrain]

While looking at the new spec for Customer Name, which is essentially one Field "split" in two inputs, I realized the current structure would not allow for that case to happen, this is an effort to pave the way.

Currently

Editable Fields is composed of 2 components, the main "EditableField" and the "Input", the 2nd handles "interactive" (think input, dropdown) and "static" (what you see when the fields are not active) values and the first one handles state and it is able to render as many "Inputs" as necessary within itself (for multi-value fields).

This works well when you assume that you only have one "interactive" (input) & one "static", but doesn't if you need one "static" to cover 2 inputs for example.

This PR

Here we make the following adjustments:

• Decoupling: extract the "static", and "actions" parts from the "input" into their own components
• Rename "static" to "mask" as I think is clearer
• EditableField now handles the render of all, input handles only input stuff, mask only mask stuff, etc
• This work allowed me to improve some code, make it more readable and clearer in its intention
• Tests are updated accordingly (most them passed from the get go, yay!)

All in all, here we have quite a bit of work to... have the same as we had before.

[netlify]

Deploy preview for hsds-react ready!

Built with commit e353140

https://deploy-preview-677--hsds-react.netlify.com

[coveralls]

Pull Request Test Coverage Report for Build 2423

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 100.0%

---

Totals
Change from base Build 2422:	0.0%
Covered Lines:	20
Relevant Lines:	20

---

💛 - Coveralls

[jaredmcdaniel]

Took a quick lap around Editable Fields in storybook, and everything looks good from my end!

[knicklabs]

Nice work!