Tabs Component initial

[daigof]

• Similar to Form component this is the initial version compatible with PocketDerm. However:
• I dont like how it handle the Tabs as object {id,title}, worse it couples the initialTab to Id=1 forcing us to provide at least one Tab object with Id=1
• I propose drop the tab objects and just work with arrays of string titles and the active Id would be the index now. As usual this would require more refactor in PocketDerm as well.

[benkolde]

@daigof

You can totally refuse this but on mobile, tabs become left aligned with the first string having a margin of 24px from the left side of the window. It would be nice to bake this into the component if possible.

[daigof]

You can totally refuse this but on mobile, tabs become left aligned with the first string having a margin of 24px from the left side of the window. It would be nice to bake this into the component if possible.

@benkolde Yeah absolutely, I refactor all the styles a little bit. Note that the Tab Item already had a padding left/right: 24px so I didnt add the extra margin-left, means that the Tab first letter will be exactly 24px to the left of the Tabs component container

[daigof]

@snags88 what do you think regarding flattening the tabItems structure to be just an array of strings (titles) and handle tabId as array index. Having refactored the Tabs Example I realized the tabItems object structure may be due that the objects contains part of the content displayed in page but I still think this should be decoupled.

[snags88]

@daigof i think we can keep as objects for now. I briefly looked at how we use it for pocketderm and it seems like we use the object notation to help with setting the query string.