feat: add support for variants in segmented control

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.2.5-beta-1",
+    "version": "1.2.5-beta-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -16,7 +16,7 @@
 
 import { OptionType } from '@Common/Types'
 import StyledRadioGroup from '../RadioGroup/RadioGroup'
-import { SegmentedControlProps } from './types'
+import { SegmentedControlProps, SegmentedControlVariant } from './types'
 
 const SegmentedControl = ({
     tabs,
@@ -25,9 +25,10 @@ const SegmentedControl = ({
     tooltips,
     disabled = false,
     rootClassName = '',
+    variant = SegmentedControlVariant.WHITE_ON_GRAY,
 }: SegmentedControlProps) => (
     <StyledRadioGroup
-        className={`gui-yaml-switch-window-bg ${rootClassName}`}
+        className={`${variant} ${rootClassName}`}
         onChange={onChange}
         initialTab={initialTab}
         name="segmented-control"

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -1,2 +1,2 @@
-export type { SegmentedControlProps } from './types'
+export { type SegmentedControlProps, SegmentedControlVariant } from './types'
 export { default as SegmentedControl } from './SegmentedControl.component'

src/Common/SegmentedControl/index.ts

@@ -16,11 +16,18 @@
 
 import { OptionType } from '@Common/Types'
 
+export enum SegmentedControlVariant {
+    // NOTE: values are css class names
+    GRAY_ON_WHITE = 'gui-yaml-switch',
+    WHITE_ON_GRAY = 'gui-yaml-switch-window-bg',
+}
+
 export interface SegmentedControlProps {
     tabs: OptionType[]
     initialTab: string
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
     tooltips?: string[]
     disabled?: boolean
     rootClassName?: string
+    variant?: SegmentedControlVariant
 }