feat #344 - Tabs: Add activeTabClasses prop

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,14 +39,15 @@ const useStyles = createUseStyles({
 	}
 })
 
-interface TabProps {
+interface TabProps extends Pick<TabsProps, 'activeTabClasses'> {
 	isActiveTab: boolean
 	label: string
 	tabIndex: number
 	onClickTab: (tabIndex: number) => void
 }
 
 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 (

src/components/Tabs/index.tsx

@@ -43,13 +43,15 @@ export interface TabConfig {
 }
 
 export interface TabsProps {
+	activeTabClasses?: string[]
 	classes?: string[]
 	defaultActiveIndex?: number
 	onTabChange?: (data: TabConfig) => void
 	tabConfig: TabConfig[]
 }
 
 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}