From 47f5fbb496ef5e98627ba02bd6eb914ab2fde78c Mon Sep 17 00:00:00 2001
From: Noah Templet <noahtemp13@gmail.com>
Date: Thu, 13 Aug 2020 13:31:03 -0500
Subject: [PATCH] Updated Tabs component for more flexibility

---
 package.json                 |  2 +-
 src/components/Tabs/Tabs.jsx | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 2b2a9fb..b8b1b56 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@revibe-dev/revibe-component-library",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A component library built for sharing components to all the Revibe websites (main site, Aritst Portal, etc.).",
   "main": "./lib/index.js",
   "browser": "lib/index.umd.js",
diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx
index ec03b10..09067b9 100644
--- a/src/components/Tabs/Tabs.jsx
+++ b/src/components/Tabs/Tabs.jsx
@@ -44,12 +44,14 @@ class Tabs extends React.Component {
   }
 
   render() {
-    const { labels, content, pills, pillColor, vertical, tabPlacement, textPlacement, ...props } = this.props
+    const { labels, content, pills, pillColor, vertical, tabPlacement, textPlacement, navProps, tabContentProps, ...props } = this.props
+    const { navClassName, ...navPropsLeft } = navProps
+    const { tabClassName, ...tabProps } = tabContentProps
 
     const navBar = (
       <>
         {labels.map((label, index) => (
-          <NavItem className={`${index > 0 ? `m${vertical ? "t" : "l"}-1` : ""} ${index < labels.length - 1 ? `m${vertical ? "b" : "r"}-1` : ""}`}>
+          <NavItem className={`${index > 0 ? `m${vertical ? "t" : "l"}-1` : ""} ${index < labels.length - 1 ? `m${vertical ? "b" : "r"}-1` : ""} ${navClassName}`} {...navPropsLeft}>
             <NavLink
               className={this.state.activeTab === index ? "active" : ""}
               onClick={() => this.toggle(index)}
@@ -62,7 +64,7 @@ class Tabs extends React.Component {
     )
 
     const tabContent = (
-      <TabContent activeTab={this.state.activeTab}>
+      <TabContent activeTab={this.state.activeTab} className={tabClassName} {...tabProps}>
         {content.map((val, index) => (
           <TabPane tabId={index} className={`${textPlacement ? `text-${textPlacement}` : ""}`}>
             {val}
@@ -115,13 +117,19 @@ Tabs.propTypes = {
   /** Sets the horizontal placement of the tabs. [center, end] */
   tabPlacement: PropTypes.string,
   /** Sets the placement of text. [left, center, right] */
-  textPlacement: PropTypes.string
+  textPlacement: PropTypes.string,
+  /** Navigation bar props. */
+  navProps: PropTypes.object,
+  /** Tab content props. */
+  tabContentProps: PropTypes.object
 }
 
 Tabs.defaultProps = {
   labels: [ "tab1", "tab2" ],
   content: [ "This is content for tab 1.", "This is content for tab 2." ],
-  pillColor: "primary"
+  pillColor: "primary",
+  navProps: { className: "" },
+  tabContentProps: { className: "" }
 }
 
 export { Tabs }