oolib 2.127.3 → 2.127.5

package/dist/components/Modals/derivedComps/ModalSmall/index.d.ts

@@ -13,6 +13,7 @@ export interface ModalSmallProps {
     alignActions?: alignActionsType;
     desktopWidth?: string;
     children: ReactNode;
+    disableHeader: boolean;
 }
 /**
  * @component Renders a small modal component with customizable content and actions.
@@ -30,6 +31,7 @@ export interface ModalSmallProps {
  * @prop {alignActionsType} alignActions: A string indicating how the modal actions buttons should be aligned. Defaults to "right".
  * @prop {string} desktopWidth: A string indicating the width of the modal on desktop views. Defaults to "50vw".
  * @prop {React.ReactNode} children: The content to be rendered inside the modal.
+ * @prop {boolean} disableHeader: Disable the modal header
  * @return {ReactElement} The rendered modal component.
  */
 export declare const ModalSmall: FunctionComponent<ModalSmallProps>;

package/dist/components/Modals/derivedComps/ModalSmall/index.js

@@ -22,10 +22,11 @@ var Modal_1 = require("../../Modal");
  * @prop {alignActionsType} alignActions: A string indicating how the modal actions buttons should be aligned. Defaults to "right".
  * @prop {string} desktopWidth: A string indicating the width of the modal on desktop views. Defaults to "50vw".
  * @prop {React.ReactNode} children: The content to be rendered inside the modal.
+ * @prop {boolean} disableHeader: Disable the modal header
  * @return {ReactElement} The rendered modal component.
  */
 var ModalSmall = function (_a) {
-    var title = _a.title, onClose = _a.onClose, invert = _a.invert, showActionPanel = _a.showActionPanel, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Close" : _b, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Confirm" : _c, _d = _a.overflowVisible, overflowVisible = _d === void 0 ? true : _d, _e = _a.fitToContentHeight, fitToContentHeight = _e === void 0 ? true : _e, _f = _a.alignActions, alignActions = _f === void 0 ? "right" : _f, _g = _a.desktopWidth, desktopWidth = _g === void 0 ? "50vw" : _g, children = _a.children;
-    return (react_1.default.createElement(Modal_1.Modal, { title: title, onClose: onClose, onCloseText: onCloseText, onConfirm: onConfirm, onConfirmText: onConfirmText, desktopWidth: desktopWidth, overflowVisible: overflowVisible, fitToContentHeight: fitToContentHeight, invert: invert, showActionPanel: showActionPanel, alignActions: alignActions, children: react_1.default.createElement("div", { style: { padding: "2rem" } }, children) }));
+    var title = _a.title, onClose = _a.onClose, invert = _a.invert, showActionPanel = _a.showActionPanel, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Close" : _b, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Confirm" : _c, _d = _a.overflowVisible, overflowVisible = _d === void 0 ? true : _d, _e = _a.fitToContentHeight, fitToContentHeight = _e === void 0 ? true : _e, _f = _a.alignActions, alignActions = _f === void 0 ? "right" : _f, _g = _a.desktopWidth, desktopWidth = _g === void 0 ? "50vw" : _g, children = _a.children, disableHeader = _a.disableHeader;
+    return (react_1.default.createElement(Modal_1.Modal, { title: title, onClose: onClose, onCloseText: onCloseText, onConfirm: onConfirm, onConfirmText: onConfirmText, desktopWidth: desktopWidth, overflowVisible: overflowVisible, fitToContentHeight: fitToContentHeight, invert: invert, showActionPanel: showActionPanel, alignActions: alignActions, children: react_1.default.createElement("div", { style: { padding: "2rem" } }, children), disableHeader: disableHeader }));
 };
 exports.ModalSmall = ModalSmall;

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

@@ -1,5 +1,5 @@
 import React from "react";
-export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, valueSuffix, }: {
+export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, valueSuffix, showCount }: {
     data: any;
     valuePath: string;
     labelPath: string;
@@ -7,4 +7,5 @@ export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPat
     onClick?: (name: string) => void;
     colors?: string[];
     valueSuffix?: string;
+    showCount?: boolean;
 }) => React.JSX.Element;

package/dist/components/PercentBarChart/index.js

@@ -49,6 +49,7 @@ var recharts_1 = require("recharts");
 var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var Typo_1 = require("../Typo");
 var getTotalCount_1 = require("../../utils/getTotalCount");
+var themes_1 = require("../../themes");
 var chartColors = [
     "rgb(120, 86, 255)",
     "rgb(255, 117, 86)",
@@ -69,10 +70,13 @@ var renderCustomizedLabel = function (_a) {
     return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, x: 0, y: y - offset, fill: "black", textAnchor: "start", dominantBaseline: "middle", className: "SANS_2" }, value));
 };
 var renderCustomizedValue = function (_a) {
-    var y = _a.y, width = _a.width, height = _a.height, value = _a.value, suffix = _a.suffix, opacity = _a.opacity;
+    var y = _a.y, width = _a.width, height = _a.height, value = _a.value, showCount = _a.showCount, suffix = _a.suffix, opacity = _a.opacity;
     var xOffset = 5;
     var yOffset = 2;
-    return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, fontWeight: "600", x: width + xOffset, y: y + height / 2 + yOffset, fill: "black", textAnchor: "start", dominantBaseline: "middle", className: "SANS_2" }, "".concat(value).concat(suffix || "")));
+    var percent = value.split("_")[0]; //cuz value here is always percentage_count;
+    var count = value.split("_")[1];
+    return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, fontWeight: "600", x: width + xOffset, y: y + height / 2 + yOffset, fill: "black", textAnchor: "start", dominantBaseline: "middle", className: "SANS_2" }, "".concat(percent).concat(suffix || ""),
+        react_1.default.createElement("tspan", { fill: themes_1.colors.greyColor50, y: y + height / 2 + yOffset }, showCount ? " | ".concat(count) : '')));
 };
 var _dataSample = [
     { name: "Great food", value: 72.3, Type: 0 },
@@ -85,17 +89,30 @@ var configs = {
     barGap: 32,
 };
 var PercentBarChart = function (_a) {
-    var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, title = _a.title, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, _d = _a.labelPath, labelPath = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e, _f = _a.valueSuffix, valueSuffix = _f === void 0 ? "%" : _f;
+    var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, title = _a.title, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, // is relevant only for the initial data setting in useMemo. after that, the actual percentage is always stored against the 'percentage' key, and the count against the 'count' key
+    _d = _a.labelPath, // is relevant only for the initial data setting in useMemo. after that, the actual percentage is always stored against the 'percentage' key, and the count against the 'count' key
+    labelPath = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e, _f = _a.valueSuffix, valueSuffix = _f === void 0 ? "%" : _f, _g = _a.showCount, showCount = _g === void 0 ? true : _g;
     var totalCount = (0, getTotalCount_1.getTotalCount)({ data: _data, countPath: valuePath });
     var data = (0, react_1.useMemo)(function () {
         var finalData = __spreadArray([], _data, true);
-        finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount), name: (0, _EXPORTS_1.getVal)(d, labelPath), color: colors[i % colors.length] })); });
+        finalData = finalData.map(function (d, i) {
+            var percentage = (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount);
+            var count = (0, _EXPORTS_1.getVal)(d, valuePath);
+            return ({
+                // ...d,
+                percentage: percentage,
+                count: count,
+                percentage_count: percentage + '_' + count,
+                name: (0, _EXPORTS_1.getVal)(d, labelPath),
+                color: colors[i % colors.length],
+            });
+        });
         finalData.sort(function (a, b) {
             return Number(b.value || 0) - Number(a.value || 0);
         });
         return finalData;
     }, [_data, labelPath, valuePath]);
-    var _g = (0, react_1.useState)(undefined), activeBar = _g[0], setActiveBar = _g[1];
+    var _h = (0, react_1.useState)(undefined), activeBar = _h[0], setActiveBar = _h[1];
     var changeBarOpacityFn = function (name) {
         return activeBar && activeBar !== name ? 0.4 : 1;
     };
@@ -114,7 +131,7 @@ var PercentBarChart = function (_a) {
                     } },
                     react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
                     react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: labelPath }),
-                    react_1.default.createElement(recharts_1.Bar, __assign({ radius: [2, 4, 4, 2], style: onClick ? { cursor: "pointer" } : {}, dataKey: "value" }, (onClick
+                    react_1.default.createElement(recharts_1.Bar, __assign({ radius: [2, 4, 4, 2], style: onClick ? { cursor: "pointer" } : {}, dataKey: "percentage" }, (onClick
                         ? {
                             onMouseOver: function (args) { return setActiveBar(args[labelPath]); },
                             onMouseOut: function () { return setActiveBar(undefined); },
@@ -131,12 +148,14 @@ var PercentBarChart = function (_a) {
                                     opacity: changeBarOpacityFn(props[labelPath]),
                                 });
                             } }),
-                        react_1.default.createElement(recharts_1.LabelList, { dataKey: "value", offset: 0, content: function (props) {
+                        react_1.default.createElement(recharts_1.LabelList, { dataKey: "percentage_count", offset: 0, content: function (props) {
+                                console.log({ props: props });
                                 return renderCustomizedValue({
                                     y: props.y,
                                     width: props.width,
                                     height: props.height,
-                                    value: props.value,
+                                    value: props.value, //here value is the percentage
+                                    showCount: showCount,
                                     suffix: valueSuffix,
                                     opacity: changeBarOpacityFn(props[labelPath]),
                                 });

package/dist/components/RadioListMultiQuestion/index.js

@@ -69,10 +69,9 @@ var RadioListMultiQuestion = function (_a) {
                         react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.display))), options === null || options === void 0 ? void 0 :
                 options.map(function (option, i) {
                     var _a;
-                    return (react_1.default.createElement("td", { key: "".concat(subQuestion.value, "-").concat(option === null || option === void 0 ? void 0 : option.value), style: { borderLeft: "1px solid ".concat(greyColor10) } },
+                    return (react_1.default.createElement("td", { key: "".concat(subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value, "-").concat(option === null || option === void 0 ? void 0 : option.value), style: { borderLeft: "1px solid ".concat(greyColor10) } },
                         react_1.default.createElement(styled_1.StyledElem, null,
-                            react_1.default.createElement(RadioAndCheckbox_1.RadioButton, { isSelected: (Object.keys(value).length > 0 && (subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value)) &&
-                                    ((_a = value[subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value]) === null || _a === void 0 ? void 0 : _a.value) === (option === null || option === void 0 ? void 0 : option.value), onClick: function () { return !readOnly && handleChange(subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value, option); } }))));
+                            react_1.default.createElement(RadioAndCheckbox_1.RadioButton, { isSelected: value[subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value] && ((_a = value[subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value]) === null || _a === void 0 ? void 0 : _a.value) === (option === null || option === void 0 ? void 0 : option.value), onClick: function () { return !readOnly && handleChange(subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value, option); } }))));
                 }))); })))));
 };
 exports.default = RadioListMultiQuestion;

package/dist/stories/RadioListMultiQuestion.stories.js

@@ -28,11 +28,11 @@ var _RadioListMultiQuestion = function (args) {
                 { display: 'Check the delivery date', value: 'check_delivery_date' },
                 { display: 'Check for payment options', value: 'check_payment_options' },
             ], options: [
-                { display: 'Never' },
-                // { display: 'Rarely', value: 'rarely' },
-                // { display: 'Sometimes', value: 'sometimes' },
-                // { display: 'Often', value: 'often' },
-                // { display: 'Always', value: 'always' },
+                { display: 'Never', value: 'never' },
+                { display: 'Rarely', value: 'rarely' },
+                { display: 'Sometimes', value: 'sometimes' },
+                { display: 'Often', value: 'often' },
+                { display: 'Always', value: 'always' },
             ], sublabel: "Select all that apply", value: value, onChange: function (d) { return setValue(d); }, readOnly: args.readOnly })));
 };
 exports._RadioListMultiQuestion = _RadioListMultiQuestion;

package/package.json

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