oolib 2.129.0 → 2.129.2

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

@@ -0,0 +1,13 @@
+export default GroupQuestionsInputSingle;
+declare function GroupQuestionsInputSingle({ options, subQuestionLabels, onChange, value, readOnly, id, questionColWidth, radioColsWidth, variant: _variant }: {
+    options: any;
+    subQuestionLabels: any;
+    onChange: any;
+    value: any;
+    readOnly: any;
+    id: any;
+    questionColWidth?: number;
+    radioColsWidth?: number;
+    variant?: string;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";

package/dist/components/{RadioListMultiQuestion → GroupQuestionsInputSingle}/index.js

@@ -41,9 +41,16 @@ var styled_1 = require("./styled");
 var BlockLabel_1 = require("../BlockLabel");
 var themes_1 = require("../../themes");
 var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var _EXPORTS_1 = require("../../utils/_EXPORTS");
+var mixins_1 = require("../../themes/mixins");
+var DropdownSingle_1 = require("../Dropdowns/DropdownSingle");
 var greyColor10 = themes_1.colors.greyColor10;
-function RadioListMultiQuestion(_a) {
-    var options = _a.options, subQuestionLabels = _a.subQuestionLabels, onChange = _a.onChange, value = _a.value, readOnly = _a.readOnly, id = _a.id;
+function GroupQuestionsInputSingle(_a) {
+    var options = _a.options, subQuestionLabels = _a.subQuestionLabels, onChange = _a.onChange, value = _a.value, readOnly = _a.readOnly, id = _a.id, _b = _a.questionColWidth, questionColWidth = _b === void 0 ? 200 : _b, _c = _a.radioColsWidth, radioColsWidth = _c === void 0 ? 120 : _c, _d = _a.variant, _variant = _d === void 0 ? 'radio' : _d;
+    var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
+    var variant = (screenWidth < (0, mixins_1.getBreakPoint)("sm") || _variant === 'dropdown')
+        ? 'dropdown'
+        : 'radio';
     var props = arguments[0];
     var handleChange = function (subQuestionValue, option) {
         // const key = `${label.trim().replaceAll(' ','').toLowerCase()}.${subQuestionValue}`
@@ -53,12 +60,19 @@ function RadioListMultiQuestion(_a) {
     };
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
-        react_1.default.createElement(styled_1.StyledTable, null,
+        react_1.default.createElement("div", { style: { overflowX: "auto", overflowY: "hidden" } }, variant === 'radio' ? (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 === null || options === void 0 ? void 0 :
-                    options.map(function (option) { return (react_1.default.createElement(styled_1.StyledTableTh, { key: option === null || option === void 0 ? void 0 : option.value },
+                    react_1.default.createElement("th", { style: {
+                            width: "".concat(questionColWidth, "px"),
+                            minWidth: "".concat(questionColWidth, "px"),
+                            borderBottom: "1px solid ".concat(greyColor10),
+                        } }),
+                    " ", options === null || options === void 0 ? void 0 :
+                    options.map(function (option) { return (react_1.default.createElement(styled_1.StyledTableTh, { style: {
+                            width: "".concat(radioColsWidth, "px"),
+                            minWidth: "".concat(radioColsWidth, "px"),
+                        }, key: option === null || option === void 0 ? void 0 : option.value },
                         react_1.default.createElement(styled_1.StyledElem, null,
                             react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, option === null || option === void 0 ? void 0 : option.display)))); }))),
             react_1.default.createElement("tbody", null, subQuestionLabels === null || subQuestionLabels === void 0 ? void 0 : subQuestionLabels.map(function (subQuestion, i) { return (react_1.default.createElement(styled_1.StyledTableRow, { key: subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value, index: i },
@@ -71,9 +85,16 @@ function RadioListMultiQuestion(_a) {
                         react_1.default.createElement(styled_1.StyledElem, null,
                             react_1.default.createElement(RadioAndCheckbox_1.RadioButton, { isSelected: (value &&
                                     (subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value) &&
-                                    ((_a = value[subQuestion.value]) === null || _a === void 0 ? void 0 : _a.value) === (option === null || option === void 0 ? void 0 : option.value)) ||
-                                    false, onClick: function () { return !readOnly && handleChange(subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value, option); } }))));
-                }))); })))));
+                                    ((_a = value[subQuestion.value]) === null || _a === void 0 ? void 0 : _a.value) ===
+                                        (option === null || option === void 0 ? void 0 : option.value)) ||
+                                    false, onClick: function () {
+                                    return !readOnly &&
+                                        handleChange(subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value, option);
+                                } }))));
+                }))); })))) : (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, subQuestionLabels.map(function (subQuestion) { return (react_1.default.createElement("div", null,
+            react_1.default.createElement(Typo_1.SANS_2, { semibold: true, style: { paddingBottom: "1rem" } }, subQuestion.display),
+            react_1.default.createElement(DropdownSingle_1.DropdownSingle, { options: options, value: value && value[subQuestion.value], onChange: function (k, v) {
+                    handleChange(subQuestion.value, v);
+                } }))); }))))));
 }
-;
-exports.default = RadioListMultiQuestion;
+exports.default = GroupQuestionsInputSingle;

package/dist/index.d.ts

@@ -63,7 +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 { default as GroupQuestionsInputSingle } from "./components/GroupQuestionsInputSingle";
 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.RadioListMultiQuestion = 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.GroupQuestionsInputSingle = 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,8 +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; } });
+var GroupQuestionsInputSingle_1 = require("./components/GroupQuestionsInputSingle");
+Object.defineProperty(exports, "GroupQuestionsInputSingle", { enumerable: true, get: function () { return __importDefault(GroupQuestionsInputSingle_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 → GroupQuestionsInputSingle.stories.d.ts}

@@ -9,4 +9,4 @@ declare namespace _default {
     let args: {};
 }
 export default _default;
-export function _RadioListMultiQuestion(args: any): import("react").JSX.Element;
+export function _GroupQuestionsInputSingle(args: any): import("react").JSX.Element;

package/dist/stories/GroupQuestionsInputSingle.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._GroupQuestionsInputSingle = void 0;
+var react_1 = require("react");
+var GroupQuestionsInputSingle_1 = __importDefault(require("../components/GroupQuestionsInputSingle"));
+var themes_1 = require("../themes");
+exports.default = {
+    title: "Components/GroupQuestionsInputSingle",
+    argTypes: {
+        readOnly: {
+            name: "Read Only",
+            type: "boolean"
+        },
+    },
+    args: {}
+};
+var _GroupQuestionsInputSingle = 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(GroupQuestionsInputSingle_1.default, { label: "When shopping online, how often do you do each of the following?", subQuestionLabels: [
+                { display: 'Visit multiple websites Visit multiple websites', value: 'visit_multiple_websites' },
+                { display: 'Read customer reviews Read customer reviews ', value: 'read_customer_reviews' },
+                { display: 'Watch a video demonstration Watch a video demonstration', value: 'watch_video_demo' },
+                { display: 'Check the delivery date Check the delivery date', value: 'check_delivery_date' },
+                { display: 'Check for payment options Check for payment options', value: 'check_payment_options' },
+            ], options: [
+                { display: 'Never Never Never Never ', value: 'never' },
+                { display: 'Rarely Rarely Rarely Rarely ', value: 'rarely' },
+                { display: 'Sometimes Sometimes Sometimes Sometimes ', value: 'sometimes' },
+                { display: 'Often Often Often Often ', value: 'often' },
+                { display: 'Always Always Always Always ', value: 'always' },
+            ], sublabel: "Select all that apply", value: value, onChange: function (id, value) { return setValue(value); }, readOnly: args.readOnly })));
+};
+exports._GroupQuestionsInputSingle = _GroupQuestionsInputSingle;

package/package.json

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

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

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

package/dist/stories/RadioListMultiQuestion.stories.js

@@ -1,38 +0,0 @@
-"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' },
-            ], sublabel: "Select all that apply", value: value, onChange: function (id, value) { return setValue(value); }, readOnly: args.readOnly })));
-};
-exports._RadioListMultiQuestion = _RadioListMultiQuestion;