Feature/tabpanel

[Ibabalola]

Tab panel is a generic component that should contain 2 sub-components:

1. TabGroup
2. Tab

The simple usage for this component should be:

<TabGroup activeTabClassName="tab-list-active">
 <Tab label="Tab 1">This is content for tab 1</Tab>
 <Tab label="Tab 2">This is content for tab 2</Tab>
 <Tab label="Tab 3">This is content for tab 3</Tab>
 <Tab label="Tab 4">This is content for tab 4</Tab>
</TabGroup>

Behaviour:

• it should highlight the selected tab
• it should give the ability to disable one tab
• it should allow to specify a class for the tabgroup
• it should allow to specify a class for the tab
• it should allow to specify which one is the first tab selected
• it should allow to specify a custom content instead of label( hello )

Appearance:

[Ibabalola]

fair play @daniele-zurico i'll take a second look and will update the PR

[Ibabalola]

The simple usage has been updated to be:

    <TabGroup
      activeTabClassName="tab-list-active"
    >
      <Tab label="Tab 1">This is content for tab 1</Tab>
      <Tab label="Tab 2">This is content for tab 2</Tab>
      <Tab label="Tab 3">This is content for tab 3</Tab>
      <Tab label="Tab 4">This is content for tab 4</Tab>
    </TabGroup>

[daniele-zurico]

Tab panel is a generic component that should contain 2 sub-components:

1. TabGroup
2. Tab

The simple usage for this component should be:

<TabGroup activeTabClassName="tab-list-active">
 <Tab label="Tab 1">This is content for tab 1</Tab>
 <Tab label="Tab 2">This is content for tab 2</Tab>
 <Tab label="Tab 3">This is content for tab 3</Tab>
 <Tab label="Tab 4">This is content for tab 4</Tab>
</TabGroup>

Behaviour:

• it should highlight the selected tab
• it should give the ability to disable one tab
• it should allow to specify a class for the tabgroup
• it should allow to specify a class for the tab
• it should allow to specify which one is the first tab selected
• it should allow to specify a custom content instead of label( hello )

Appearance:

Hey @Ibabalola let's go with this implementation ... the only addition is the following one:

<TabGroup>
 <Tab label="Tab 1" customLabel={}>This is content for tab 1</Tab>
 <Tab label="Tab 2" customLabel={}>This is content for tab 2</Tab>
 <Tab label="Tab 3" customLabel={}>This is content for tab 3</Tab>
 <Tab label="Tab 4" customLabel={}>This is content for tab 4</Tab>
</TabGroup>

CustomLabel will allow to specify a custom header like

[Ibabalola]

@daniele-zurico added the ability for custom labels within <Tab>

<TabGroup>
 <Tab eventKey="tab-1" label="tab 1">This the content for tab 1</Tab>
 <Tab eventKey="tab-2" label="tab 2">This the content for tab 2</Tab>
 <Tab 
    eventKey="tab-3" 
    label={<img src="https://freesvg.org/img/afaulconbridge-Lightbulb-OnOff-1.png" width="20px"/>}>This is content for tab 3</Tab>
</TabGroup>