@devtron-labs/devtron-fe-common-lib 0.0.19 → 0.0.20

package/dist/Common/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './Toggle.scss';
-declare const Toggle: ({ selected, onSelect, color, rootClassName, disabled, dataTestId, ...props }: {
+declare const Toggle: ({ selected, onSelect, color, rootClassName, disabled, dataTestId, Icon, iconClass, ...props }: {
     [x: string]: any;
     selected?: boolean;
     onSelect?: any;
@@ -8,5 +8,7 @@ declare const Toggle: ({ selected, onSelect, color, rootClassName, disabled, dat
     rootClassName?: string;
     disabled?: boolean;
     dataTestId?: string;
+    Icon?: any;
+    iconClass?: string;
 }) => JSX.Element;
 export default Toggle;

package/dist/index.js

@@ -14925,7 +14925,7 @@ function Icon(_a) {
 }
 function Body(_a) {
     var title = _a.title, _b = _a.subtitle, subtitle = _b === void 0 ? null : _b, _c = _a.children, children = _c === void 0 ? null : _c;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex left column " }, { children: [jsxRuntime.jsx("h3", __assign({ className: "confirmation-dialog__title lh-1-25 dc__break-word w-100" }, { children: title })), subtitle && jsxRuntime.jsx("div", __assign({ className: "confirmation-dialog__subtitle" }, { children: subtitle })), children] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex left column " }, { children: [jsxRuntime.jsx("h3", __assign({ className: "confirmation-dialog__title lh-1-5 dc__break-word w-100" }, { children: title })), subtitle && jsxRuntime.jsx("div", __assign({ className: "confirmation-dialog__subtitle" }, { children: subtitle })), children] })));
 }
 function ButtonGroup(_a) {
     var children = _a.children;
@@ -22675,13 +22675,13 @@ var Checkbox = /** @class */ (function (_super) {
     return Checkbox;
 }(React.Component));
 
-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}";
+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.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\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.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";
 styleInject(css_248z$2);
 
 var Toggle = function (_a) {
     var _b;
-    var _c = _a.selected, selected = _c === void 0 ? false : _c, _d = _a.onSelect, onSelect = _d === void 0 ? null : _d, _e = _a.color, color = _e === void 0 ? "#36b37e" : _e, _f = _a.rootClassName, rootClassName = _f === void 0 ? "" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.dataTestId, dataTestId = _h === void 0 ? "handle-toggle-button" : _h, props = __rest(_a, ["selected", "onSelect", "color", "rootClassName", "disabled", "dataTestId"]);
-    var _j = __read(React.useState(selected), 2), active = _j[0], setActive = _j[1];
+    var _c = _a.selected, selected = _c === void 0 ? false : _c, _d = _a.onSelect, onSelect = _d === void 0 ? null : _d, _e = _a.color, color = _e === void 0 ? '#36b37e' : _e, _f = _a.rootClassName, rootClassName = _f === void 0 ? '' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.dataTestId, dataTestId = _h === void 0 ? 'handle-toggle-button' : _h, _j = _a.Icon, Icon = _j === void 0 ? null : _j, _k = _a.iconClass, iconClass = _k === void 0 ? '' : _k, props = __rest(_a, ["selected", "onSelect", "color", "rootClassName", "disabled", "dataTestId", "Icon", "iconClass"]);
+    var _l = __read(React.useState(selected), 2), active = _l[0], setActive = _l[1];
     useEffectAfterMount(function () {
         if (typeof onSelect === 'function') {
             if (active !== selected) {
@@ -22697,7 +22697,7 @@ var Toggle = function (_a) {
             setActive(function (active) { return !active; });
         }
     }
-    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 })] })));
+    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", __assign({ className: "toggle__slider ".concat(Icon ? 'with-icon br-4 dc__border' : 'round'), "data-testid": dataTestId }, { children: Icon && jsxRuntime.jsx(Icon, { className: "icon-dim-20 br-4 p-2 ".concat(iconClass) }) }))] })));
 };
 
 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}";

package/package.json

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

package/src/Common/Dialogs/ConfirmationDialog.tsx

@@ -17,7 +17,7 @@ function Icon({ src, className = '' }: ConfirmationDialogIconType) {
 function Body({ title, subtitle = null, children = null }: ConfirmationDialogBodyType) {
     return (
         <div className="flex left column ">
-            <h3 className="confirmation-dialog__title lh-1-25 dc__break-word w-100">{title}</h3>
+            <h3 className="confirmation-dialog__title lh-1-5 dc__break-word w-100">{title}</h3>
             {subtitle && <div className="confirmation-dialog__subtitle">{subtitle}</div>}
             {children}
         </div>

package/src/Common/Toggle/Toggle.scss

@@ -4,15 +4,14 @@
     width: 100%;
     height: 100%;
 
-    &.disabled{
+    &.disabled {
         cursor: not-allowed;
-        .toggle__slider{
+        .toggle__slider {
             cursor: not-allowed;
         }
     }
 }
 
-
 /* Hide default HTML checkbox */
 
 .toggle__switch input {
@@ -21,7 +20,6 @@
     height: 0;
 }
 
-
 /* The slider */
 
 .toggle__slider {
@@ -32,39 +30,49 @@
     right: 0;
     bottom: 0;
     background-color: #ccc;
-    transition: all .4s ease;
-}
-
-.toggle__slider:before {
-    position: absolute;
-    content: "";
-    height: calc( 100% - 8px);
-    width: calc( 50% - 4px);
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
     transition: all 0.4s ease;
+    &.round {
+        border-radius: 34px;
+        &:before {
+            border-radius: 50%;
+        }
+    }
+    &:before {
+        position: absolute;
+        content: '';
+        height: calc(100% - 8px);
+        width: calc(50% - 4px);
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        transition: all 0.4s ease;
+    }
+    &.with-icon {
+        background-color: var(--N000) !important;
+        svg {
+            position: absolute;
+            content: '';
+            top: -1px;
+            left: -1px;
+            background-color: var(--N300);
+            transition: all 0.4s ease;
+        }
+    }
 }
 
-input:checked+.toggle__slider {
+input:checked + .toggle__slider {
     background-color: var(--color);
+    &:before {
+        transform: translateX(calc(100%));
+    }
+    &.with-icon {
+        svg {
+            transform: translateX(calc(100%));
+            background-color: var(--color);
+        }
+    }
 }
 
-input:focus+.toggle__slider {
+input:focus + .toggle__slider {
     box-shadow: 0 0 1px var(--color);
 }
-
-input:checked+.toggle__slider:before {
-    transform: translateX(calc( 100%));
-}
-
-
-/* Rounded sliders */
-
-.toggle__slider.round {
-    border-radius: 34px;
-}
-
-.toggle__slider.round:before {
-    border-radius: 50%;
-}

package/src/Common/Toggle/Toggle.tsx

@@ -1,25 +1,35 @@
-import React from 'react';
-import { useEffectAfterMount } from '../Helper';
+import React from 'react'
+import { useEffectAfterMount } from '../Helper'
 import './Toggle.scss'
 
-const Toggle = ({selected=false, onSelect=null, color="#36b37e", rootClassName="", disabled=false, dataTestId="handle-toggle-button", ...props})=>{
-    const [active, setActive] = React.useState(selected);
+const Toggle = ({
+    selected = false,
+    onSelect = null,
+    color = '#36b37e',
+    rootClassName = '',
+    disabled = false,
+    dataTestId = 'handle-toggle-button',
+    Icon = null,
+    iconClass= '',
+    ...props
+}) => {
+    const [active, setActive] = React.useState(selected)
 
-    useEffectAfterMount(()=>{
-        if(typeof onSelect === 'function'){
-            if(active !== selected){
+    useEffectAfterMount(() => {
+        if (typeof onSelect === 'function') {
+            if (active !== selected) {
                 onSelect(active)
             }
         }
-    },[active])
+    }, [active])
 
     useEffectAfterMount(() => {
         setActive(selected)
     }, [selected])
 
-    function handleClick(e){
-        if(!disabled){
-            setActive(active=>!active)
+    function handleClick(e) {
+        if (!disabled) {
+            setActive((active) => !active)
         }
     }
 
@@ -30,9 +40,11 @@ const Toggle = ({selected=false, onSelect=null, color="#36b37e", rootClassName="
             style={{ ['--color' as any]: color }}
         >
             <input type="checkbox" checked={!!active} onChange={handleClick} className="toggle__input" />
-            <span className="toggle__slider round" data-testid={dataTestId}></span>
+            <span className={`toggle__slider ${Icon ? 'with-icon br-4 dc__border' : 'round'}`} data-testid={dataTestId}>
+                {Icon && <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />}
+            </span>
         </label>
     )
 }
 
-export default Toggle
+export default Toggle