feat(tabs): "justified" and "fill" options

Author: assisrafael

demo/TabsExamples.jsx

@@ -11,33 +11,62 @@ export function TabsExamples() {
           <h1 className="h4">Simple Tabs</h1>
           <Tabs
             tabs={[
-              { title: 'A', content: 'a' },
-              { title: 'B', content: 'b' },
-              { title: 'C', content: 'c' },
+              {
+                title: 'A',
+                content: <Lorem header="Content A" />,
+              },
+              { title: 'B', content: <Lorem header="Content B" /> },
+              { title: 'C', content: <Lorem header="Content C" /> },
             ]}
           />
         </div>
         <div className="col">
           <h1 className="h4">Bordered Tabs</h1>
           <Tabs
             tabs={[
-              { title: 'A', content: 'a' },
-              { title: 'B', content: 'b' },
-              { title: 'C', content: 'c' },
+              { title: 'A', content: <Lorem header="Content A" /> },
+              { title: 'B', content: <Lorem header="Content B" /> },
+              { title: 'C', content: <Lorem header="Content C" /> },
             ]}
             bordered={true}
             activeTab={4}
           />
         </div>
       </div>
-      <div className="row mt-2">
+      <div className="row mt-3">
+        <div className="col">
+          <h1 className="h4">Justified Tabs</h1>
+          <Tabs
+            tabs={[
+              { title: 'A', content: <Lorem header="Content A" /> },
+              { title: 'Bbbbbbbbbbbbbbbb', content: <Lorem header="Content B" /> },
+              { title: 'C', content: <Lorem header="Content C" /> },
+            ]}
+            justified={true}
+            activeTab={1}
+          />
+        </div>
+        <div className="col">
+          <h1 className="h4">Fill Tabs</h1>
+          <Tabs
+            tabs={[
+              { title: 'A', content: <Lorem header="Content A" /> },
+              { title: 'Bbbbbbbbbbbbbbbb', content: <Lorem header="Content B" /> },
+              { title: 'C', content: <Lorem header="Content C" /> },
+            ]}
+            fill={true}
+            activeTab={1}
+          />
+        </div>
+      </div>
+      <div className="row mt-3">
         <div className="col">
           <h1 className="h4">Vertical Tabs</h1>
           <Tabs
             tabs={[
-              { title: 'A', content: 'a' },
-              { title: 'B', content: 'b' },
-              { title: 'C', content: 'c' },
+              { title: 'A', content: <Lorem header="Content A" /> },
+              { title: 'B', content: <Lorem header="Content B" /> },
+              { title: 'C', content: <Lorem header="Content C" /> },
             ]}
             vertical={true}
             onSelect={console.log}
@@ -47,9 +76,9 @@ export function TabsExamples() {
           <h1 className="h4">Stateful Tabs</h1>
           <StatefulTabs
             tabs={[
-              { title: 'A', content: 'a' },
-              { title: 'B', content: 'b' },
-              { title: 'C', content: 'c' },
+              { title: 'A', content: <Lorem header="Content A" /> },
+              { title: 'B', content: <Lorem header="Content B" /> },
+              { title: 'C', content: <Lorem header="Content C" /> },
             ]}
             vertical={true}
           />
@@ -58,3 +87,14 @@ export function TabsExamples() {
     </div>
   );
 }
+
+function Lorem({ header }) {
+  return (
+    <p>
+      <h3>{header}</h3>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iusto dolores voluptatum sunt. Assumenda, vero esse?
+      Numquam alias repellendus, quaerat beatae expedita inventore recusandae, molestiae earum vel illo provident
+      ducimus?
+    </p>
+  );
+}

demo/demo.jsx

@@ -22,7 +22,7 @@ ReactDOM.render(
       <StatefulTabs
         vertical={true}
         onlyRenderActiveTab={true}
-        initialTab={3}
+        initialTab={7}
         tabs={[
           {
             title: 'Dialog',

src/tabs/Tabs.jsx

@@ -6,7 +6,7 @@ import { formatClasses } from '../utils/attributes';
 import { TabHeader } from './TabHeader';
 import { TabContent } from './TabContent';
 
-export function Tabs({ vertical, tabs, activeTab, onlyRenderActiveTab, bordered, onSelect }) {
+export function Tabs({ vertical, tabs, activeTab, onlyRenderActiveTab, bordered, onSelect, justified, fill }) {
   if (activeTab >= tabs.length) {
     // eslint-disable-next-line no-console
     console.error(`Invalid tab selected: ${activeTab}. The first tab will be selected instead.`);
@@ -17,7 +17,12 @@ export function Tabs({ vertical, tabs, activeTab, onlyRenderActiveTab, bordered,
     <div className={formatClasses(['custom-tabs-container', vertical && 'd-flex'])}>
       <div className="tabs-navigation">
         <ul
-          className={formatClasses(['nav', vertical ? 'nav-pills flex-column' : 'nav-tabs'])}
+          className={formatClasses([
+            'nav',
+            vertical ? 'nav-pills flex-column' : 'nav-tabs',
+            justified && 'nav-justified',
+            fill && 'nav-fill',
+          ])}
           id="myTab"
           role="tablist"
         >
@@ -55,6 +60,8 @@ export function Tabs({ vertical, tabs, activeTab, onlyRenderActiveTab, bordered,
 Tabs.defaultProps = {
   activeTab: 0,
   bordered: false,
+  fill: false,
+  justified: false,
   onlyRenderActiveTab: false,
   onSelect: () => {},
   vertical: false,
@@ -63,6 +70,8 @@ Tabs.defaultProps = {
 Tabs.propTypes = {
   activeTab: PropTypes.number,
   bordered: PropTypes.bool,
+  fill: PropTypes.bool,
+  justified: PropTypes.bool,
   onlyRenderActiveTab: PropTypes.bool,
   onSelect: PropTypes.func,
   tabs: PropTypes.arrayOf(