From 6f7744331d44081074ca85c2e3e7dbce817d6eae Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Thu, 17 Jun 2021 15:57:14 -0700
Subject: [PATCH] feat #344 - Tabs: Add activeTabClasses prop

---
 src/components/Tabs/Tab.tsx   | 7 +++++--
 src/components/Tabs/index.tsx | 3 +++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
index f5c5ad71..227e7844 100644
--- a/src/components/Tabs/Tab.tsx
+++ b/src/components/Tabs/Tab.tsx
@@ -1,6 +1,7 @@
 import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
 import { generateThemedActiveTabStyles } from './utils'
+import { TabsProps } from '.'
 import React, { FC } from 'react'
 import { styleguide, ThemeType } from 'components/assets/styles'
 
@@ -38,7 +39,7 @@ const useStyles = createUseStyles({
 	}
 })
 
-interface TabProps {
+interface TabProps extends Pick<TabsProps, 'activeTabClasses'> {
 	isActiveTab: boolean
 	label: string
 	tabIndex: number
@@ -46,6 +47,7 @@ interface TabProps {
 }
 
 const Tab: FC<TabProps> = ({
+	activeTabClasses = [],
 	isActiveTab,
 	label,
 	onClickTab,
@@ -55,7 +57,8 @@ const Tab: FC<TabProps> = ({
 
 	const tabClasses = cn({
 		[classes.tab]: true,
-		[classes.activeTab]: isActiveTab
+		[classes.activeTab]: isActiveTab,
+		[cn(activeTabClasses)]: isActiveTab
 	})
 
 	return (
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index 199c3693..fe549b3c 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -43,6 +43,7 @@ export interface TabConfig {
 }
 
 export interface TabsProps {
+	activeTabClasses?: string[]
 	classes?: string[]
 	defaultActiveIndex?: number
 	onTabChange?: (data: TabConfig) => void
@@ -50,6 +51,7 @@ export interface TabsProps {
 }
 
 export const Tabs: FC<TabsProps> = ({
+	activeTabClasses = [],
 	classes = [],
 	defaultActiveIndex = 0,
 	onTabChange,
@@ -71,6 +73,7 @@ export const Tabs: FC<TabsProps> = ({
 	const renderTabItems = () =>
 		tabConfig.map(({ key, label }: TabConfig, i) => (
 			<Tab
+				activeTabClasses={activeTabClasses}
 				isActiveTab={i === activeIndex}
 				key={key}
 				label={label}