@devtron-labs/devtron-fe-common-lib 0.0.7-beta-37 → 0.0.7-beta-39

package/dist/Common/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import './radioGroup.scss';
+interface RadioGroupInterface {
+    name: string;
+    onChange: any;
+    className?: string;
+    initialTab: string;
+    disabled: boolean;
+    showTippy?: boolean;
+    tippyContent?: any;
+    dataTestId?: string;
+}
+interface RadioGroupComposition {
+    Radio?: React.FC<any>;
+}
+declare const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition;
+export default RadioGroup;

package/dist/Common/index.d.ts

@@ -28,3 +28,4 @@ export { default as EmptyState } from './EmptyState/EmptyState';
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState';
 export { default as Toggle } from './Toggle/Toggle';
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable';
+export { default as StyledRadioGroup } from './RadioGroup/RadioGroup';

package/dist/index.js

@@ -500,8 +500,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$5 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  width: 300px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 20px;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  width: 300px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  width: 300px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 20px;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  width: 300px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
+styleInject(css_248z$6);
 
 var _g$2;
 function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
@@ -4117,8 +4117,8 @@ var VisibleModal = /** @class */ (function (_super) {
     return VisibleModal;
 }(React.Component));
 
-var css_248z$4 = ".drawer {\n  position: absolute;\n  overflow: hidden;\n}\n.drawer.left, .drawer.right {\n  top: 0;\n  bottom: 0;\n  width: 0;\n  transition: width 200ms;\n}\n.drawer.left.show, .drawer.right.show {\n  min-width: var(--minWidth);\n  width: var(--width);\n  max-width: var(--maxWidth);\n}\n.drawer.top, .drawer.bottom {\n  left: 0;\n  right: 0;\n  height: 0;\n  transition: height 200ms;\n}\n.drawer.top.show, .drawer.bottom.show {\n  height: var(--height);\n}\n.drawer.right {\n  right: 0;\n}\n.drawer.left {\n  left: 0;\n}\n.drawer.top {\n  top: 0;\n}\n.drawer.bottom {\n  bottom: 0;\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".drawer {\n  position: absolute;\n  overflow: hidden;\n}\n.drawer.left, .drawer.right {\n  top: 0;\n  bottom: 0;\n  width: 0;\n  transition: width 200ms;\n}\n.drawer.left.show, .drawer.right.show {\n  min-width: var(--minWidth);\n  width: var(--width);\n  max-width: var(--maxWidth);\n}\n.drawer.top, .drawer.bottom {\n  left: 0;\n  right: 0;\n  height: 0;\n  transition: height 200ms;\n}\n.drawer.top.show, .drawer.bottom.show {\n  height: var(--height);\n}\n.drawer.right {\n  right: 0;\n}\n.drawer.left {\n  left: 0;\n}\n.drawer.top {\n  top: 0;\n}\n.drawer.bottom {\n  bottom: 0;\n}";
+styleInject(css_248z$5);
 
 var Drawer = function (_a) {
     var children = _a.children, position = _a.position, height = _a.height, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, parentClassName = _a.parentClassName, onEscape = _a.onEscape;
@@ -4356,7 +4356,7 @@ var RadioGroupItem = /** @class */ (function (_super) {
     };
     return RadioGroupItem;
 }(React.Component));
-var RadioGroup = /** @class */ (function (_super) {
+var RadioGroup$1 = /** @class */ (function (_super) {
     __extends(RadioGroup, _super);
     function RadioGroup() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -8500,8 +8500,8 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 var Tippy = index;
 
-var css_248z$3 = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
-styleInject(css_248z$3);
+var css_248z$4 = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
+styleInject(css_248z$4);
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
@@ -16442,8 +16442,8 @@ var CustomSelect = function (props) {
     return jsxRuntime.jsx(Select, __assign({}, props));
 };
 
-var css_248z$2 = ".info-bar-container .info_text .success {\n  background-color: var(--G100);\n}\n.info-bar-container .warn {\n  background: var(--Y100);\n  border: solid var(--Y200);\n}\n.info-bar-container .warn .warning-icon path:nth-child(2) {\n  fill: var(--Y700);\n}\n.info-bar-container .info_bar {\n  background-color: var(--B100);\n  border: 1px solid var(--B200);\n}\n.info-bar-container .error_bar {\n  background-color: var(--R100);\n  border: 1px solid var(--R200);\n}\n.info-bar-container .question-bar {\n  background-color: var(--V100);\n  border: 1px solid var(--V200);\n}";
-styleInject(css_248z$2);
+var css_248z$3 = ".info-bar-container .info_text .success {\n  background-color: var(--G100);\n}\n.info-bar-container .warn {\n  background: var(--Y100);\n  border: solid var(--Y200);\n}\n.info-bar-container .warn .warning-icon path:nth-child(2) {\n  fill: var(--Y700);\n}\n.info-bar-container .info_bar {\n  background-color: var(--B100);\n  border: 1px solid var(--B200);\n}\n.info-bar-container .error_bar {\n  background-color: var(--R100);\n  border: 1px solid var(--R200);\n}\n.info-bar-container .question-bar {\n  background-color: var(--V100);\n  border: 1px solid var(--V200);\n}";
+styleInject(css_248z$3);
 
 function InfoColourBar(_a) {
     var message = _a.message, classname = _a.classname, Icon = _a.Icon, iconClass = _a.iconClass, iconSize = _a.iconSize, renderActionButton = _a.renderActionButton, linkText = _a.linkText, redirectLink = _a.redirectLink, linkOnClick = _a.linkOnClick, linkClass = _a.linkClass, internalLink = _a.internalLink, styles = _a.styles;
@@ -16503,8 +16503,8 @@ var Checkbox = /** @class */ (function (_super) {
     return Checkbox;
 }(React.Component));
 
-var css_248z$1 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}\n\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\n\n/* Rounded sliders */\n.toggle__slider.round {\n  border-radius: 34px;\n}\n\n.toggle__slider.round:before {\n  border-radius: 50%;\n}";
-styleInject(css_248z$1);
+var css_248z$2 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}\n\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\n\n/* Rounded sliders */\n.toggle__slider.round {\n  border-radius: 34px;\n}\n\n.toggle__slider.round:before {\n  border-radius: 50%;\n}";
+styleInject(css_248z$2);
 
 var Toggle = function (_a) {
     var _b;
@@ -16528,8 +16528,8 @@ var Toggle = function (_a) {
     return (jsxRuntime.jsxs("label", __assign({}, props, { className: "".concat(rootClassName, " toggle__switch ").concat(disabled ? 'disabled' : ''), style: (_b = {}, _b['--color'] = color, _b) }, { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: !!active, onChange: handleClick, className: "toggle__input" }), jsxRuntime.jsx("span", { className: "toggle__slider round", "data-testid": dataTestId })] })));
 };
 
-var css_248z = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
-styleInject(css_248z);
+var css_248z$1 = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
+styleInject(css_248z$1);
 
 function ScanVulnerabilitiesTable(_a) {
     var vulnerabilities = _a.vulnerabilities;
@@ -16544,6 +16544,40 @@ function ScanVulnerabilitiesTable(_a) {
                 })] }) })));
 }
 
+var css_248z = ".radio-group {\n  height: 30px;\n  background: white;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  border-radius: 4px;\n}\n.radio-group .label,\n.radio-group .radio,\n.radio-group .checkbox {\n  margin: 0;\n}\n.radio-group .radio {\n  height: 100%;\n  width: auto;\n  color: var(--N400);\n  display: flex;\n  align-items: center;\n}\n.radio-group .radio + .radio {\n  margin-top: 0;\n}\n.radio-group input[type=checkbox] {\n  display: contents;\n  overflow: hidden;\n  max-width: 0px;\n  height: 0;\n  opacity: 0;\n  margin: unset;\n}\n.radio-group input + .radio__item-label {\n  padding: 4px 6px;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  transition: all 0.5s;\n  cursor: pointer;\n}\n.radio-group input[type=checkbox]:checked + .radio__item-label {\n  background: #2c3354;\n  color: white;\n  border-radius: 4px;\n}";
+styleInject(css_248z);
+
+var RadioContext = React.createContext(null);
+function useRadioContext() {
+    var context = React.useContext(RadioContext);
+    if (!context) {
+        throw new Error("Radio compound components cannot be rendered outside the Toggle component");
+    }
+    return context;
+}
+var RadioGroup = React.memo(function RadioGroup(_a) {
+    var name = _a.name, onChange = _a.onChange, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, initialTab = _a.initialTab, _c = _a.disabled, disabled = _c === void 0 ? false : _c; _a.dataTestId;
+    var _d = __read(React.useState(null), 2), selected = _d[0], select = _d[1];
+    React.useEffect(function () {
+        if (initialTab === selected)
+            return;
+        select(initialTab);
+    }, [initialTab]);
+    return (jsxRuntime.jsx(RadioContext.Provider, __assign({ value: { name: name, selected: selected, select: select, disabled: disabled, onChange: onChange } }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(className, " radio-group") }, { children: children })) })));
+});
+function Radio(_a) {
+    var value = _a.value, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.showTippy, showTippy = _c === void 0 ? false : _c, _d = _a.tippyContent, tippyContent = _d === void 0 ? '' : _d, _e = _a.canSelect, canSelect = _e === void 0 ? true : _e, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f, _g = _a.tippyClass, tippyClass = _g === void 0 ? '' : _g, dataTestId = _a.dataTestId;
+    var _h = useRadioContext(), name = _h.name, selected = _h.selected, select = _h.select, disabled = _h.disabled, onChange = _h.onChange;
+    return (jsxRuntime.jsx(ConditionalWrap, __assign({ condition: showTippy, wrap: function (children) { return (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt w-250 ".concat(tippyClass), arrow: false, placement: "bottom", content: tippyContent }, { children: children }))); } }, { children: jsxRuntime.jsxs("label", __assign({ className: "".concat(className, " radio ").concat((isDisabled || disabled) ? 'disabled' : '') }, { children: [jsxRuntime.jsx("input", { type: "checkbox", value: value, name: name, checked: value === selected, onChange: function (e) {
+                        e.persist();
+                        if (canSelect) {
+                            select(e.target.value);
+                        }
+                        onChange(e);
+                    }, disabled: isDisabled || disabled }), jsxRuntime.jsx("span", __assign({ className: "radio__item-label", "data-testid": dataTestId }, { children: children }))] })) })));
+}
+RadioGroup.Radio = Radio;
+
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.CDModalTab = CDModalTab;
@@ -16579,7 +16613,7 @@ exports.PopupMenu = PopupMenu;
 exports.Progressing = Progressing;
 exports.PropagateTagInfo = PropagateTagInfo;
 exports.ROUTES = ROUTES;
-exports.RadioGroup = RadioGroup;
+exports.RadioGroup = RadioGroup$1;
 exports.RadioGroupItem = RadioGroupItem;
 exports.Reload = Reload;
 exports.RequestTimeout = RequestTimeout;
@@ -16588,6 +16622,7 @@ exports.ScanVulnerabilitiesTable = ScanVulnerabilitiesTable;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
 exports.SingleSelectOption = SingleSelectOption;
+exports.StyledRadioGroup = RadioGroup;
 exports.TOAST_ACCESS_DENIED = TOAST_ACCESS_DENIED;
 exports.TOKEN_COOKIE_NAME = TOKEN_COOKIE_NAME;
 exports.TagDetails = TagDetails;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7-beta-37",
+    "version": "0.0.7-beta-39",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,88 @@
+import Tippy from '@tippyjs/react'
+import React, { useState, useEffect } from 'react'
+import { ConditionalWrap } from '../Helper'
+import './radioGroup.scss'
+
+const RadioContext = React.createContext(null)
+
+function useRadioContext() {
+    const context = React.useContext(RadioContext)
+    if (!context) {
+        throw new Error(`Radio compound components cannot be rendered outside the Toggle component`)
+    }
+    return context
+}
+
+interface RadioGroupInterface {
+    name: string
+    onChange: any
+    className?: string
+    initialTab: string
+    disabled: boolean
+    showTippy?: boolean
+    tippyContent?: any
+    dataTestId?: string
+}
+
+interface RadioGroupComposition {
+    Radio?: React.FC<any>
+}
+
+const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition = React.memo(function RadioGroup({
+    name,
+    onChange,
+    children,
+    className = '',
+    initialTab,
+    disabled = false,
+    dataTestId 
+}) {
+    const [selected, select] = useState(null)
+
+    useEffect(() => {
+        if (initialTab === selected) return
+        select(initialTab)
+    }, [initialTab])
+
+    return (
+        <RadioContext.Provider value={{ name, selected, select, disabled, onChange }}>
+            <div className={`${className} radio-group`}>{children}</div>
+        </RadioContext.Provider>
+    )
+})
+
+function Radio({ value, children, className = '', showTippy = false, tippyContent = '', canSelect = true, isDisabled = false, tippyClass = '', dataTestId }) {
+    const { name, selected, select, disabled, onChange } = useRadioContext()
+    return (
+        <ConditionalWrap
+            condition={showTippy}
+            wrap={(children) => (
+                <Tippy className={`default-tt w-250 ${tippyClass}`} arrow={false} placement="bottom" content={tippyContent}>
+                    {children}
+                </Tippy>
+            )}
+        >
+            <label className={`${className} radio ${(isDisabled || disabled)? 'disabled': ''}`}>
+                <input
+                    type="checkbox"
+                    value={value}
+                    name={name}
+                    
+                    checked={value === selected}
+                    onChange={(e) => {
+                        e.persist()
+                        if (canSelect) {
+                            select(e.target.value)
+                        }
+                        onChange(e)
+                    }}
+                    disabled={isDisabled || disabled}
+                />
+                <span className="radio__item-label" data-testid={dataTestId}>{children}</span>
+            </label>
+        </ConditionalWrap>
+    )
+}
+
+RadioGroup.Radio = Radio
+export default RadioGroup

package/src/Common/RadioGroup/radioGroup.scss

@@ -0,0 +1,46 @@
+.radio-group {
+    .label,
+    .radio,
+    .checkbox {
+        margin: 0;
+    }
+    height: 30px;
+    background: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+    border-radius: 4px;
+    .radio {
+        height: 100%;
+        width: auto;
+        color: var(--N400);
+        display: flex;
+        align-items: center;
+    }
+    .radio+.radio {
+        margin-top: 0;
+    }
+    input[type=checkbox] {
+        display: contents;
+        overflow: hidden;
+        max-width: 0px;
+        height: 0;
+        opacity: 0;
+        margin: unset;
+    }
+    input+.radio__item-label {
+        padding: 4px 6px;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        transition: all 0.5s;
+        cursor: pointer;
+    }
+    input[type=checkbox]:checked+.radio__item-label {
+        background: #2c3354;
+        color: white;
+        border-radius: 4px;
+    }
+}

package/src/Common/index.ts

@@ -26,5 +26,6 @@ export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
-export { default as Toggle } from './Toggle/Toggle' 
-export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable' 
+export { default as Toggle } from './Toggle/Toggle'
+export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
+export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'