oolib 2.188.5 → 2.188.7

package/dist/stories/v2/components/Checkbox.stories.js

@@ -173,7 +173,7 @@ exports.CheckboxList.argTypes = {
 };
 var CheckboxInput = function (args) {
     var _a = (0, react_1.useState)([]), value = _a[0], setValue = _a[1];
-    var _b = (0, react_1.useState)({ value: "smth", display: "Squidward" }), option = _b[0], setOption = _b[1];
+    var _b = (0, react_1.useState)({ value: "smth", display: "Squidward Squidward Squidward Squidward Squidward Squidward Squidward Squidward Squidward Squidward ", desc: 'This is an explanation This is an explanation This is an explanation This is an explanation This is an explanation This is an explanation This is an explanation ' }), option = _b[0], setOption = _b[1];
     (0, react_1.useEffect)(function () {
         setOption(__assign(__assign({}, option), { display: args.option1 }));
     }, [args.option1]);
@@ -182,7 +182,8 @@ var CheckboxInput = function (args) {
     }, [args.optionIsCorrect]);
     return (React.createElement("div", { style: {
             padding: "4rem",
-            backgroundColor: args.invert ? greyColor100 : "unset",
+            backgroundColor: 'red', //args.invert ? greyColor100 : "unset",
+            width: '300px'
         } },
         React.createElement(RadioAndCheckbox_1.CheckboxInput, __assign({}, args, { value: value, option: option, S: args.size == "S",
             rightWrongResult: args.markOptions,

package/dist/v2/components/Accordion/index.js

@@ -52,7 +52,7 @@ var useStyleUpdateAfterToggleTransition_1 = require("../../../utils/useStyleUpda
 var StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"], ["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"])), colors_1.colors.grey10);
 var StyledHeader = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
 var StyledRightHeaderSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var ArrowWrapper = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"], ["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"])), function (props) { return (props.isExpanded ? 0 : 180); }, (0, mixins_1.transition)("transform"));
+var ArrowWrapper = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"], ["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"])), function (props) { return (props.isExpanded ? 180 : 0); }, (0, mixins_1.transition)("transform"));
 var StyledContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"])), function (_a) {
     var expandAnimationDuration = _a.expandAnimationDuration;
     return (0, mixins_1.transition)("height ".concat(expandAnimationDuration / 1000, "s ease-out"));

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

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,8 +17,12 @@ var styled_1 = require("../../../../styled");
 var utils_1 = require("../../../../utils");
 var CheckboxButton_1 = require("../CheckboxButton");
 var TextLoader_1 = require("../../../../../../../components/LoadersAndProgress/TextLoader");
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../../../../../../themes/mixins");
 var CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
 var red = themes_1.colors.red, grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, onSecondary = themes_1.colors.onSecondary, invertRed = themes_1.colors.invertRed;
+var UI_BODY_SM_DF_STYLED = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), (0, mixins_1.clampText)(2));
+var UI_CAPTION_DF_STYLED = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_DF)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), (0, mixins_1.clampText)(2));
 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, _c = _a.className, className = _c === void 0 ? '' : _c;
     var isSelected = !!value.find(function (selOp) { return selOp.value === option.value; });
@@ -43,6 +51,9 @@ var CheckboxInput = function (_a) {
                     : genCheckboxButton({ disabled: true }) //else rightWrongResult has come in, but this doesnt have to be marked right or wrong
             : genCheckboxButton() // rightWrongResult has not come in. so gen normal radio button
         ),
-        react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { bold: rightWrongResult && isSelected, color: disabled ? grey40 : grey80, invert: invert }, option.display)));
+        react_1.default.createElement("div", { style: { minWidth: 0 } },
+            react_1.default.createElement(UI_BODY_SM_DF_STYLED, { bold: rightWrongResult && isSelected, color: disabled ? grey40 : grey80, invert: invert }, option.display),
+            option.desc && react_1.default.createElement(UI_CAPTION_DF_STYLED, null, option.desc))));
 };
 exports.CheckboxInput = CheckboxInput;
+var templateObject_1, templateObject_2;

package/package.json

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