oolib 2.24.4 → 2.25.0

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.d.ts

@@ -1,3 +1,11 @@
+export function CheckboxButton({ className, isSelected, onClick, disabled, invert, S }: {
+    className: any;
+    isSelected: any;
+    onClick: any;
+    disabled: any;
+    invert: any;
+    S: any;
+}): JSX.Element;
 export function CheckboxInput({ option, onClick, S, inputStyle, value, invert, disabled, rightWrongResult, }: {
     option: any;
     onClick: any;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxInput = void 0;
+exports.CheckboxInput = exports.CheckboxButton = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../../../../icons");
 var themes_1 = require("../../../../../../themes");
@@ -25,15 +25,20 @@ var utils_1 = require("../../../../utils");
 var styled_2 = require("./styled");
 var Check = icons_1.icons.Check, CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
 var white = themes_1.colors.white, green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100;
+var CheckboxButton = function (_a) {
+    var className = _a.className, isSelected = _a.isSelected, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, S = _a.S;
+    return (react_1.default.createElement(styled_2.StyledCheckbox, __assign({ onClick: function (ev) { return onClick && onClick(ev); } }, { className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected &&
+        react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } })));
+};
+exports.CheckboxButton = CheckboxButton;
 var CheckboxInput = function (_a) {
     var option = _a.option, onClick = _a.onClick, S = _a.S, inputStyle = _a.inputStyle, _b = _a.value, value = _b === void 0 ? [] : _b, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult;
     var isSelected = !!value.find(function (selOp) { return selOp.value === option.value; });
     var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
     var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
-    return inputStyle === 'tagSelect' ? (react_1.default.createElement(Tags_1.TagSelect, __assign({}, { isSelected: isSelected, invert: invert, disabled: disabled }, { onClick: function () { return !disabled && onClick && onClick(option, isSelected); }, display: option.display, value: option.value, style: { alignSelf: 'flex-start' } }))) : (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick && onClick(option, isSelected); } }),
+    return inputStyle === 'tagSelect' ? (react_1.default.createElement(Tags_1.TagSelect, __assign({}, { isSelected: isSelected, invert: invert, disabled: disabled }, { onClick: function () { return !disabled && onClick(option, isSelected); }, display: option.display, value: option.value, style: { alignSelf: 'flex-start' } }))) : (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option, isSelected); } }),
         !rightWrongResult || markingCommand === undefined ?
-            react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected &&
-                react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } }))
+            react_1.default.createElement(exports.CheckboxButton, __assign({}, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: 'btn' }))
             :
                 ["markCorrect", "revealCorrect"].includes(markingCommand) ?
                     react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: green, style: {

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/styled.js

@@ -32,8 +32,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var utilsOolib_1 = require("../../../../../../utilsOolib");
 var themes_1 = require("../../../../../../themes");
 var mixins_1 = require("../../../../../../themes/mixins");
-var none = themes_1.colors.none, greyColor40 = themes_1.colors.greyColor40;
-exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"], ["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"])), function (_a) {
+var none = themes_1.colors.none, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80;
+exports.StyledCheckbox = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: ", ";\n\n  ", "\n\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n"], ["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: ", ";\n\n  ", "\n\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n"])), function (_a) {
     var S = _a.S;
     return S ? '1.7rem' : '2rem';
 }, function (_a) {
@@ -43,8 +43,14 @@ exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 ||
     var colors = _a.theme.colors, disabled = _a.disabled, invert = _a.invert;
     return disabled ?
         greyColor40 : invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
-}, none, (0, mixins_1.transition)('background-color 0.2s'), function (_a) {
+}, none, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, (0, mixins_1.transition)('background-color 0.2s'), function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled, invert = _a.invert, colors = _a.theme.colors;
     return isSelected && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "], ["\n    background-color: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])), disabled ? greyColor40 : invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors));
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled, theme = _a.theme, invert = _a.invert;
+    return !isSelected && !disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors));
 });
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/index.d.ts

@@ -1 +1 @@
-export { CheckboxInput } from "./CheckboxInput";
+export { CheckboxInput, CheckboxButton } from "./CheckboxInput";

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxInput = void 0;
+exports.CheckboxButton = exports.CheckboxInput = void 0;
 var CheckboxInput_1 = require("./CheckboxInput");
 Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return CheckboxInput_1.CheckboxInput; } });
+Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return CheckboxInput_1.CheckboxButton; } });

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index.d.ts

@@ -1,3 +1,11 @@
+export function RadioButton({ className, isSelected, onClick, disabled, invert, S }: {
+    className: any;
+    isSelected: any;
+    onClick: any;
+    disabled: any;
+    invert: any;
+    S: any;
+}): JSX.Element;
 export function RadioInput({ option, onClick, disabled, invert, value, S, rightWrongResult, }: {
     option: any;
     onClick: any;

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioInput = void 0;
+exports.RadioInput = exports.RadioButton = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../../../../../themes");
 var icons_1 = require("../../../../../../icons");
@@ -24,14 +24,19 @@ var styled_1 = require("../../../../styled");
 var styled_2 = require("./styled");
 var green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40;
 var XCircle = icons_1.icons.XCircle, CheckCircle = icons_1.icons.CheckCircle;
+var RadioButton = function (_a) {
+    var className = _a.className, isSelected = _a.isSelected, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, S = _a.S;
+    return (react_1.default.createElement(styled_2.StyledRadioInput, __assign({ onClick: function (ev) { return onClick && onClick(ev); } }, { className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(styled_2.StyledRadioInputFill, { invert: invert, S: S })));
+};
+exports.RadioButton = RadioButton;
 var RadioInput = function (_a) {
     var option = _a.option, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, value = _a.value, S = _a.S, rightWrongResult = _a.rightWrongResult;
     var isSelected = option.value === (value === null || value === void 0 ? void 0 : value.value);
     var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
     var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
-    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick && onClick(option); } }),
+    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option); } }),
         !rightWrongResult || markingCommand === undefined ?
-            react_1.default.createElement(styled_2.StyledRadioInput, __assign({ className: 'btn' }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(styled_2.StyledRadioInputFill, { invert: invert, S: S }))
+            react_1.default.createElement(exports.RadioButton, __assign({}, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: 'btn' }))
             :
                 ["markCorrect", "revealCorrect"].includes(markingCommand) ?
                     react_1.default.createElement(CheckCircle, { size: S ? 21 : 24.5, color: green, style: {

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/styled.js

@@ -32,8 +32,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../../../themes");
 var mixins_1 = require("../../../../../../themes/mixins");
 var utilsOolib_1 = require("../../../../../../utilsOolib");
-var none = themes_1.colors.none, white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100;
-exports.StyledRadioInput = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: inherit;\n  ", "\n\n  ", "\n\n"], ["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: inherit;\n  ", "\n\n  ", "\n\n"])), function (_a) {
+var none = themes_1.colors.none, white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80;
+exports.StyledRadioInput = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: ", ";\n  ", "\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n"], ["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: ", ";\n  ", "\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n"])), function (_a) {
     var S = _a.S;
     return S ? '1.7rem' : '2rem';
 }, function (_a) {
@@ -43,15 +43,21 @@ exports.StyledRadioInput = styled_components_1.default.button(templateObject_2 |
     var colors = _a.theme.colors, disabled = _a.disabled, invert = _a.invert;
     return disabled ? greyColor40 :
         invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
-}, none, (0, mixins_1.transition)('background-color 0.2s'), function (_a) {
+}, none, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, (0, mixins_1.transition)('background-color 0.2s'), function (_a) {
     var isSelected = _a.isSelected;
     return isSelected && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color:", ";\n      display: flex;\n      align-items: center;\n      justify-content: center;\n  "], ["\n      background-color:", ";\n      display: flex;\n      align-items: center;\n      justify-content: center;\n  "])), function (_a) {
         var colors = _a.theme.colors, disabled = _a.disabled, invert = _a.invert;
         return disabled ? greyColor40 :
             invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
     });
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled, theme = _a.theme, invert = _a.invert;
+    return !isSelected && !disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors));
 });
-exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
+exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
     var S = _a.S;
     return S ? '0.7rem' : '0.8rem';
 }, function (_a) {
@@ -61,4 +67,4 @@ exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_3
     var invert = _a.invert;
     return invert ? greyColor100 : white;
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/index.d.ts

@@ -1 +1 @@
-export { RadioInput } from "./RadioInput";
+export { RadioInput, RadioButton } from "./RadioInput";

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioInput = void 0;
+exports.RadioButton = exports.RadioInput = void 0;
 var RadioInput_1 = require("./RadioInput");
 Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return RadioInput_1.RadioInput; } });
+Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioInput_1.RadioButton; } });

package/dist/components/RadioAndCheckbox/index.d.ts

@@ -1,4 +1,4 @@
 export { RadioList } from "./comps/RadioList";
-export { RadioInput } from "./comps/RadioList/comps";
 export { CheckboxList } from "./comps/CheckboxList";
-export { CheckboxInput } from "./comps/CheckboxList/comps";
+export { RadioInput, RadioButton } from "./comps/RadioList/comps";
+export { CheckboxInput, CheckboxButton } from "./comps/CheckboxList/comps";

package/dist/components/RadioAndCheckbox/index.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxInput = exports.CheckboxList = exports.RadioInput = exports.RadioList = void 0;
+exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.RadioButton = exports.RadioInput = exports.RadioList = void 0;
 var RadioList_1 = require("./comps/RadioList");
 Object.defineProperty(exports, "RadioList", { enumerable: true, get: function () { return RadioList_1.RadioList; } });
 var comps_1 = require("./comps/RadioList/comps");
 Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return comps_1.RadioInput; } });
+Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return comps_1.RadioButton; } });
 var CheckboxList_1 = require("./comps/CheckboxList");
 Object.defineProperty(exports, "CheckboxList", { enumerable: true, get: function () { return CheckboxList_1.CheckboxList; } });
 var comps_2 = require("./comps/CheckboxList/comps");
 Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return comps_2.CheckboxInput; } });
+Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return comps_2.CheckboxButton; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.24.4",
+  "version": "2.25.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",