oolib 2.125.5 → 2.127.0

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

@@ -0,0 +1,10 @@
+export default RadioListMultiQuestion;
+declare function RadioListMultiQuestion({ label, options, subQuestionLabels, onChange, value: _value, readOnly }: {
+    label: any;
+    options: any;
+    subQuestionLabels: any;
+    onChange: any;
+    value: any;
+    readOnly: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/RadioListMultiQuestion/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var RadioAndCheckbox_1 = require("../RadioAndCheckbox");
+var Typo_1 = require("../Typo");
+var styled_1 = require("./styled");
+var BlockLabel_1 = require("../BlockLabel");
+var themes_1 = require("../../themes");
+var greyColor10 = themes_1.colors.greyColor10;
+var RadioListMultiQuestion = function (_a) {
+    var label = _a.label, options = _a.options, subQuestionLabels = _a.subQuestionLabels, onChange = _a.onChange, _value = _a.value, readOnly = _a.readOnly;
+    var _b = (0, react_1.useState)(_value), value = _b[0], setValue = _b[1];
+    var handleChange = function (subQuestionValue, option) {
+        // const key = `${label.trim().replaceAll(' ','').toLowerCase()}.${subQuestionValue}`
+        var display = option.display, optionValue = option.value;
+        setValue(function (prevValue) {
+            var _a;
+            return (__assign(__assign({}, prevValue), (_a = {}, _a[subQuestionValue] = { display: display, value: optionValue }, _a)));
+        });
+        onChange(value);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, { label: label }),
+        react_1.default.createElement(styled_1.StyledTable, null,
+            react_1.default.createElement("thead", null,
+                react_1.default.createElement("tr", null,
+                    react_1.default.createElement("th", { style: { borderBottom: "1px solid ".concat(greyColor10) } }),
+                    "  ",
+                    options.map(function (option) { return (react_1.default.createElement(styled_1.StyledTableTh, { key: option.value },
+                        react_1.default.createElement(styled_1.StyledElem, null,
+                            react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, option.display)))); }))),
+            react_1.default.createElement("tbody", null, subQuestionLabels.map(function (subQuestion, i) { return (react_1.default.createElement(styled_1.StyledTableRow, { key: subQuestion.value, index: i },
+                react_1.default.createElement("td", null,
+                    react_1.default.createElement("div", { style: { padding: "1rem" } },
+                        react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, subQuestion.display))),
+                options.map(function (option, i) {
+                    var _a;
+                    return (react_1.default.createElement("td", { key: option.value, style: { borderLeft: "1px solid ".concat(greyColor10) } },
+                        react_1.default.createElement(styled_1.StyledElem, null,
+                            react_1.default.createElement(RadioAndCheckbox_1.RadioButton, { isSelected: ((_a = value[subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value]) === null || _a === void 0 ? void 0 : _a.value) === option.value, onClick: function () { return !readOnly && handleChange(subQuestion.value, option); } }))));
+                }))); })))));
+};
+exports.default = RadioListMultiQuestion;

package/dist/components/RadioListMultiQuestion/styled.d.ts

@@ -0,0 +1,4 @@
+export const StyledTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export const StyledTableTh: import("styled-components").StyledComponent<"th", any, {}, never>;
+export const StyledElem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;

package/dist/components/RadioListMultiQuestion/styled.js

@@ -0,0 +1,23 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTableRow = exports.StyledElem = exports.StyledTableTh = exports.StyledTable = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("../../themes/colors");
+var utilsOolib_1 = require("../../utilsOolib");
+var mixins_1 = require("../../themes/mixins");
+var greyColor10 = colors_1.colors.greyColor10, greyColor3 = colors_1.colors.greyColor3;
+exports.StyledTable = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: 1px solid ", ";\n    border-collapse: collapse;\n    border-spacing: 0;\n"], ["\n    border: 1px solid ", ";\n    border-collapse: collapse;\n    border-spacing: 0;\n"])), greyColor10);
+exports.StyledTableTh = styled_components_1.default.th(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border-bottom: 1px solid ", ";\n    min-width: 85px;\n    border-left: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n"], ["\n    border-bottom: 1px solid ", ";\n    min-width: 85px;\n    border-left: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n"])), greyColor10, greyColor10, greyColor10);
+exports.StyledElem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex; \n    justify-content: center; \n    padding: 1rem\n"], ["\n    display: flex; \n    justify-content: center; \n    padding: 1rem\n"])));
+exports.StyledTableRow = styled_components_1.default.tr(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    ", ";\n    \n    &:hover {\n        background-color: ", ";\n    }\n"], ["\n    background-color: ", ";\n    ", ";\n    \n    &:hover {\n        background-color: ", ";\n    }\n"])), function (_a) {
+    var index = _a.index;
+    return index % 2 === 0 ? greyColor3 : 'white';
+}, (0, mixins_1.transition)("background-color"), (0, utilsOolib_1.getPrimaryColor10)(colors_1.colors));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/index.d.ts

@@ -63,6 +63,7 @@ export { default as AudioInput } from "./components/AudioInput";
 export { default as PDFInput } from "./components/PDFInput";
 export { default as IFrameInput } from "./components/IFrameInput";
 export { ResourceInput } from "./components/ResourceInput";
+export { default as RadioListMultiQuestion } from "./components/RadioListMultiQuestion";
 export { ModalConfirmAction } from "./components/Modals/derivedComps/ModalConfirmAction";
 export { SimpleTable } from "./components/SimpleTable";
 export { styledOKELinkCSS } from "./components/OKELink/styled";

package/dist/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.ResourceInput = exports.IFrameInput = void 0;
+exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.RadioListMultiQuestion = exports.ResourceInput = exports.IFrameInput = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -153,6 +153,8 @@ var IFrameInput_1 = require("./components/IFrameInput");
 Object.defineProperty(exports, "IFrameInput", { enumerable: true, get: function () { return __importDefault(IFrameInput_1).default; } });
 var ResourceInput_1 = require("./components/ResourceInput");
 Object.defineProperty(exports, "ResourceInput", { enumerable: true, get: function () { return ResourceInput_1.ResourceInput; } });
+var RadioListMultiQuestion_1 = require("./components/RadioListMultiQuestion");
+Object.defineProperty(exports, "RadioListMultiQuestion", { enumerable: true, get: function () { return __importDefault(RadioListMultiQuestion_1).default; } });
 //banners
 var Banners_1 = require("./components/Banners");
 Object.defineProperty(exports, "BannerAlert", { enumerable: true, get: function () { return Banners_1.BannerAlert; } });

package/dist/stories/RadioListMultiQuestion.stories.d.ts

@@ -0,0 +1,12 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace readOnly {
+            let name: string;
+            let type: string;
+        }
+    }
+    let args: {};
+}
+export default _default;
+export function _RadioListMultiQuestion(args: any): import("react").JSX.Element;

package/dist/stories/RadioListMultiQuestion.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._RadioListMultiQuestion = void 0;
+var react_1 = require("react");
+var RadioListMultiQuestion_1 = __importDefault(require("../components/RadioListMultiQuestion"));
+var themes_1 = require("../themes");
+exports.default = {
+    title: "Components/RadioListMultiQuestion",
+    argTypes: {
+        readOnly: {
+            name: "Read Only",
+            type: "boolean"
+        },
+    },
+    args: {}
+};
+var _RadioListMultiQuestion = function (args) {
+    var _a = (0, react_1.useState)({}), value = _a[0], setValue = _a[1];
+    console.log({ valueParent: value });
+    return (React.createElement("div", { style: { background: args.invert ? themes_1.colors.greyColor100 : '' } },
+        React.createElement(RadioListMultiQuestion_1.default, { label: "When shopping online, how often do you do each of the following?", subQuestionLabels: [
+                { display: 'Visit multiple websites', value: 'visit_multiple_websites' },
+                { display: 'Read customer reviews', value: 'read_customer_reviews' },
+                { display: 'Watch a video demonstration', value: 'watch_video_demo' },
+                { display: 'Check the delivery date', value: 'check_delivery_date' },
+                { display: 'Check for payment options', value: 'check_payment_options' },
+            ], options: [
+                { display: 'Never', value: 'never' },
+                { display: 'Rarely', value: 'rarely' },
+                { display: 'Sometimes', value: 'sometimes' },
+                { display: 'Often', value: 'often' },
+                { display: 'Always', value: 'always' },
+            ], 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.125.5",
+  "version": "2.127.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",