oolib 2.128.4 → 2.129.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ActionMenu/index.d.ts +6 -0
- package/dist/components/ActionMenu/index.js +12 -10
- package/dist/components/ActionMenu/styled.js +16 -11
- package/dist/components/RadioListMultiQuestion/index.d.ts +5 -2
- package/dist/components/RadioListMultiQuestion/index.js +30 -9
- package/dist/components/RadioListMultiQuestion/styled.js +1 -1
- package/dist/components/Tooltip/styled.js +2 -2
- package/dist/stories/ActionMenu.stories.d.ts +1 -0
- package/dist/stories/ActionMenu.stories.js +5 -4
- package/dist/stories/RadioListMultiQuestion.stories.js +10 -10
- package/package.json +1 -1
|
@@ -9,6 +9,12 @@ export interface ActionItem {
|
|
|
9
9
|
message?: string;
|
|
10
10
|
onConfirm?: () => void;
|
|
11
11
|
};
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
infoTooltip?: {
|
|
14
|
+
text?: string;
|
|
15
|
+
popOutOfOverflowHiddenParent?: boolean;
|
|
16
|
+
position?: "top" | "bottom" | "left" | "right";
|
|
17
|
+
};
|
|
12
18
|
}
|
|
13
19
|
export interface CustomSelectCompProps {
|
|
14
20
|
active: boolean;
|
|
@@ -44,6 +44,7 @@ var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflow
|
|
|
44
44
|
var styled_1 = require("./styled");
|
|
45
45
|
var ModalConfirmAction_1 = require("../Modals/derivedComps/ModalConfirmAction");
|
|
46
46
|
var react_dom_1 = require("react-dom");
|
|
47
|
+
var Tooltip_1 = require("../Tooltip");
|
|
47
48
|
/**
|
|
48
49
|
* @component Renders an action menu component with customizable text and styling.
|
|
49
50
|
*
|
|
@@ -97,16 +98,17 @@ var ActionMenu = function (_a) {
|
|
|
97
98
|
var _a, _b;
|
|
98
99
|
return (react_1.default.createElement(styled_1.StyledActionsDropMenu, { id: "dropmenu", align: align, invert: invert, optionsHeight: (_a = getOpsRect()) === null || _a === void 0 ? void 0 : _a.height, optionsWidth: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.width, showActions: showActions, fixPos: fixPos },
|
|
99
100
|
react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
101
|
+
var _a, _b, _c;
|
|
102
|
+
var optionContent = (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
|
|
103
|
+
var _a;
|
|
104
|
+
e.preventDefault();
|
|
105
|
+
e.stopPropagation();
|
|
106
|
+
!action.disabled && ((_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e));
|
|
107
|
+
setShowActions(false);
|
|
108
|
+
}, key: action.display, invert: invert }),
|
|
109
|
+
action.icon && genOptionIcon(action.icon),
|
|
110
|
+
react_1.default.createElement(Typo_1.SANS_2, null, action.display)));
|
|
111
|
+
return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction, { key: action.display }), action.infoTooltip ? (react_1.default.createElement(Tooltip_1.Tooltip, { text: ((_a = action.infoTooltip) === null || _a === void 0 ? void 0 : _a.text) || undefined, popOutOfOverflowHiddenParent: ((_b = action.infoTooltip) === null || _b === void 0 ? void 0 : _b.popOutOfOverflowHiddenParent) || false, position: ((_c = action.infoTooltip) === null || _c === void 0 ? void 0 : _c.position) || "left" }, optionContent)) : (optionContent)));
|
|
110
112
|
}))));
|
|
111
113
|
};
|
|
112
114
|
return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
|
|
@@ -51,46 +51,51 @@ exports.StyledActionMenuTracker = styled_components_1.default.div(templateObject
|
|
|
51
51
|
var storybookPreview = _a.storybookPreview;
|
|
52
52
|
return storybookPreview && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), themes_1.colors.red);
|
|
53
53
|
});
|
|
54
|
-
|
|
54
|
+
var delayVisibility = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n 0% { overflow: hidden; }\n 100% { overflow: visible; }\n"], ["\n 0% { overflow: hidden; }\n 100% { overflow: visible; }\n"])));
|
|
55
|
+
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n\n z-index: 1001;\n\n ", ";\n /* overflow-y: hidden; */\n /* Conditionally setting overflow to visible once the showActions is true with delay to keep actionMenu animation smooth, reason - to avoid hiding content on the menu option like tooltip*/\n ", "\n width: ", ";\n height: ", ";\n"], ["\n ", "\n\n z-index: 1001;\n\n ", ";\n /* overflow-y: hidden; */\n /* Conditionally setting overflow to visible once the showActions is true with delay to keep actionMenu animation smooth, reason - to avoid hiding content on the menu option like tooltip*/\n ", "\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
55
56
|
var fixPos = _a.fixPos, align = _a.align;
|
|
56
57
|
return fixPos
|
|
57
|
-
? (0, styled_components_1.css)(
|
|
58
|
+
? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: ", "px;\n z-index: 1000;\n ", "\n "], ["\n position: fixed;\n top: ", "px;\n left: ", "px;\n z-index: 1000;\n ", "\n "])), fixPos.y, fixPos.x, function (_a) {
|
|
58
59
|
var align = _a.align;
|
|
59
60
|
switch (align) {
|
|
60
61
|
case "center":
|
|
61
|
-
return (0, styled_components_1.css)(
|
|
62
|
+
return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n transform: translate(-50%, 0);\n "], ["\n transform: translate(-50%, 0);\n "])));
|
|
62
63
|
case "right":
|
|
63
|
-
return (0, styled_components_1.css)(
|
|
64
|
+
return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n transform: translate(-100%, 0);\n "], ["\n transform: translate(-100%, 0);\n "])));
|
|
64
65
|
}
|
|
65
|
-
}) : (0, styled_components_1.css)(
|
|
66
|
+
}) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n transform: translateY(100%);\n transform-origin: left top;\n ", "\n "], ["\n position: absolute;\n bottom: 0;\n transform: translateY(100%);\n transform-origin: left top;\n ", "\n "])), function (_a) {
|
|
66
67
|
var align = _a.align;
|
|
67
68
|
return align === "center"
|
|
68
|
-
? (0, styled_components_1.css)(
|
|
69
|
+
? (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n left: 1.5rem;\n transform: translate(-50%, 100%);\n "], ["\n left: 1.5rem;\n transform: translate(-50%, 100%);\n "]))) : (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", ": ", "px;\n "], ["\n ", ": ", "px;\n "])), align, 0 - offset);
|
|
69
70
|
});
|
|
70
71
|
}, (0, mixins_1.transition)("height"), function (_a) {
|
|
72
|
+
var showActions = _a.showActions;
|
|
73
|
+
return showActions
|
|
74
|
+
? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n animation: ", " 1s forwards;\n "], ["\n animation: ", " 1s forwards;\n "])), delayVisibility) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n overflow: hidden;\n "], ["\n overflow: hidden;\n "])));
|
|
75
|
+
}, function (_a) {
|
|
71
76
|
var optionsWidth = _a.optionsWidth;
|
|
72
77
|
return (optionsWidth ? "".concat(optionsWidth + offset * 2, "px") : "auto");
|
|
73
78
|
}, function (_a) {
|
|
74
79
|
var showActions = _a.showActions, optionsHeight = _a.optionsHeight;
|
|
75
80
|
return showActions ? "".concat(optionsHeight ? optionsHeight + pointerHeight + offset : "auto", "px") : "0";
|
|
76
81
|
});
|
|
77
|
-
exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(
|
|
82
|
+
exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: absolute;\n bottom: 10px;\n padding: 0.6rem 0;\n ", "\n margin: 0 ", "px;\n\n //pointer outline\n &::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n\n border: 1rem solid transparent;\n border-bottom: 1rem solid\n ", ";\n }\n\n //pointer fill\n &::before {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n ", "\n border: 0.85rem solid transparent;\n border-bottom: 0.85rem solid\n ", ";\n z-index: 1;\n }\n"], ["\n position: absolute;\n bottom: 10px;\n padding: 0.6rem 0;\n ", "\n margin: 0 ", "px;\n\n //pointer outline\n &::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n\n border: 1rem solid transparent;\n border-bottom: 1rem solid\n ", ";\n }\n\n //pointer fill\n &::before {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n ", "\n border: 0.85rem solid transparent;\n border-bottom: 0.85rem solid\n ", ";\n z-index: 1;\n }\n"])), globalVariables_1.globalLightboxStyle, offset, function (_a) {
|
|
78
83
|
var align = _a.align;
|
|
79
84
|
return align === "center"
|
|
80
|
-
? (0, styled_components_1.css)(
|
|
85
|
+
? (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n left: 50%;\n transform: translateX(-50%);\n "], ["\n left: 50%;\n transform: translateX(-50%);\n "]))) : (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n ", ": 0.5rem;\n "], ["\n ", ": 0.5rem;\n "])), align);
|
|
81
86
|
}, function (_a) {
|
|
82
87
|
var invert = _a.invert;
|
|
83
88
|
return (invert ? greyColor70 : greyColor5);
|
|
84
89
|
}, function (_a) {
|
|
85
90
|
var align = _a.align;
|
|
86
91
|
return align === "center"
|
|
87
|
-
? (0, styled_components_1.css)(
|
|
92
|
+
? (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n left: 50%;\n transform: translateX(-50%);\n "], ["\n left: 50%;\n transform: translateX(-50%);\n "]))) : (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", ": 0.65rem;\n "], ["\n ", ": 0.65rem;\n "])), align);
|
|
88
93
|
}, function (_a) {
|
|
89
94
|
var invert = _a.invert;
|
|
90
95
|
return (invert ? greyColor80 : white);
|
|
91
96
|
});
|
|
92
|
-
exports.StyledOption = styled_components_1.default.button(
|
|
97
|
+
exports.StyledOption = styled_components_1.default.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n padding: 0.25rem 1.2rem;\n background-color: transparent;\n color: ", ";\n ", ";\n ", "\n"], ["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n padding: 0.25rem 1.2rem;\n background-color: transparent;\n color: ", ";\n ", ";\n ", "\n"])), function (_a) {
|
|
93
98
|
var invert = _a.invert;
|
|
94
99
|
return (invert ? white : greyColor100);
|
|
95
100
|
}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalHoverOnWhiteBG);
|
|
96
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
101
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
export default RadioListMultiQuestion;
|
|
2
|
-
declare function RadioListMultiQuestion({ options, subQuestionLabels, onChange, value, readOnly, id }: {
|
|
2
|
+
declare function RadioListMultiQuestion({ options, subQuestionLabels, onChange, value, readOnly, id, questionColWidth, radioColsWidth, variant: _variant }: {
|
|
3
3
|
options: any;
|
|
4
4
|
subQuestionLabels: any;
|
|
5
5
|
onChange: any;
|
|
6
6
|
value: any;
|
|
7
7
|
readOnly: any;
|
|
8
8
|
id: any;
|
|
9
|
+
questionColWidth?: number;
|
|
10
|
+
radioColsWidth?: number;
|
|
11
|
+
variant?: string;
|
|
9
12
|
}, ...args: any[]): React.JSX.Element;
|
|
10
|
-
import React from
|
|
13
|
+
import React from "react";
|
|
@@ -41,9 +41,16 @@ var styled_1 = require("./styled");
|
|
|
41
41
|
var BlockLabel_1 = require("../BlockLabel");
|
|
42
42
|
var themes_1 = require("../../themes");
|
|
43
43
|
var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
|
|
44
|
+
var _EXPORTS_1 = require("../../utils/_EXPORTS");
|
|
45
|
+
var mixins_1 = require("../../themes/mixins");
|
|
46
|
+
var DropdownSingle_1 = require("../Dropdowns/DropdownSingle");
|
|
44
47
|
var greyColor10 = themes_1.colors.greyColor10;
|
|
45
48
|
function RadioListMultiQuestion(_a) {
|
|
46
|
-
var options = _a.options, subQuestionLabels = _a.subQuestionLabels, onChange = _a.onChange, value = _a.value, readOnly = _a.readOnly, id = _a.id;
|
|
49
|
+
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;
|
|
50
|
+
var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
|
|
51
|
+
var variant = (screenWidth < (0, mixins_1.getBreakPoint)("sm") || _variant === 'dropdown')
|
|
52
|
+
? 'dropdown'
|
|
53
|
+
: 'radio';
|
|
47
54
|
var props = arguments[0];
|
|
48
55
|
var handleChange = function (subQuestionValue, option) {
|
|
49
56
|
// const key = `${label.trim().replaceAll(' ','').toLowerCase()}.${subQuestionValue}`
|
|
@@ -53,12 +60,19 @@ function RadioListMultiQuestion(_a) {
|
|
|
53
60
|
};
|
|
54
61
|
return (react_1.default.createElement("div", null,
|
|
55
62
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
|
|
56
|
-
react_1.default.createElement(styled_1.StyledTable, null,
|
|
63
|
+
react_1.default.createElement("div", { style: { overflowX: "auto", overflowY: "hidden" } }, variant === 'radio' ? (react_1.default.createElement(styled_1.StyledTable, null,
|
|
57
64
|
react_1.default.createElement("thead", null,
|
|
58
65
|
react_1.default.createElement("tr", null,
|
|
59
|
-
react_1.default.createElement("th", { style: {
|
|
60
|
-
|
|
61
|
-
|
|
66
|
+
react_1.default.createElement("th", { style: {
|
|
67
|
+
width: "".concat(questionColWidth, "px"),
|
|
68
|
+
minWidth: "".concat(questionColWidth, "px"),
|
|
69
|
+
borderBottom: "1px solid ".concat(greyColor10),
|
|
70
|
+
} }),
|
|
71
|
+
" ", options === null || options === void 0 ? void 0 :
|
|
72
|
+
options.map(function (option) { return (react_1.default.createElement(styled_1.StyledTableTh, { style: {
|
|
73
|
+
width: "".concat(radioColsWidth, "px"),
|
|
74
|
+
minWidth: "".concat(radioColsWidth, "px"),
|
|
75
|
+
}, key: option === null || option === void 0 ? void 0 : option.value },
|
|
62
76
|
react_1.default.createElement(styled_1.StyledElem, null,
|
|
63
77
|
react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, option === null || option === void 0 ? void 0 : option.display)))); }))),
|
|
64
78
|
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) {
|
|
|
71
85
|
react_1.default.createElement(styled_1.StyledElem, null,
|
|
72
86
|
react_1.default.createElement(RadioAndCheckbox_1.RadioButton, { isSelected: (value &&
|
|
73
87
|
(subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value) &&
|
|
74
|
-
((_a = value[subQuestion.value]) === null || _a === void 0 ? void 0 : _a.value) ===
|
|
75
|
-
|
|
76
|
-
|
|
88
|
+
((_a = value[subQuestion.value]) === null || _a === void 0 ? void 0 : _a.value) ===
|
|
89
|
+
(option === null || option === void 0 ? void 0 : option.value)) ||
|
|
90
|
+
false, onClick: function () {
|
|
91
|
+
return !readOnly &&
|
|
92
|
+
handleChange(subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value, option);
|
|
93
|
+
} }))));
|
|
94
|
+
}))); })))) : (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, subQuestionLabels.map(function (subQuestion) { return (react_1.default.createElement("div", null,
|
|
95
|
+
react_1.default.createElement(Typo_1.SANS_2, { semibold: true, style: { paddingBottom: "1rem" } }, subQuestion.display),
|
|
96
|
+
react_1.default.createElement(DropdownSingle_1.DropdownSingle, { options: options, value: value && value[subQuestion.value], onChange: function (k, v) {
|
|
97
|
+
handleChange(subQuestion.value, v);
|
|
98
|
+
} }))); }))))));
|
|
77
99
|
}
|
|
78
|
-
;
|
|
79
100
|
exports.default = RadioListMultiQuestion;
|
|
@@ -16,7 +16,7 @@ var greyColor10 = colors_1.colors.greyColor10, greyColor3 = colors_1.colors.grey
|
|
|
16
16
|
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);
|
|
17
17
|
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);
|
|
18
18
|
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"])));
|
|
19
|
-
exports.StyledTableRow = styled_components_1.default.tr(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n ", ";\n \n &:hover {\n background-color: ", ";\n }
|
|
19
|
+
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) {
|
|
20
20
|
var index = _a.index;
|
|
21
21
|
return index % 2 === 0 ? greyColor3 : 'white';
|
|
22
22
|
}, (0, mixins_1.transition)("background-color"), (0, utilsOolib_1.getPrimaryColor10)(colors_1.colors));
|
|
@@ -19,12 +19,12 @@ var clipPaths = {
|
|
|
19
19
|
right: '100% 0%, 50% 47%, 50% 52%, 100% 100%',
|
|
20
20
|
left: '0% 0%, 50% 47%, 50% 52%, 0% 100%',
|
|
21
21
|
};
|
|
22
|
-
exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n text-align: left;\n cursor: pointer;\n"], ["\n position: relative;\n width: fit-content;\n text-align: left;\n cursor: pointer;\n"])));
|
|
22
|
+
exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n text-align: left;\n cursor: pointer;\n width: 100%;\n"], ["\n position: relative;\n width: fit-content;\n text-align: left;\n cursor: pointer;\n width: 100%;\n"])));
|
|
23
23
|
exports.StyledTooltipBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: ", ";\n z-index: ", ";\n ", "\n\n padding: 1rem;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: 5px;\n z-index: 50000000;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap: break-word;\n"], ["\n display: ", ";\n z-index: ", ";\n ", "\n\n padding: 1rem;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: 5px;\n z-index: 50000000;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap: break-word;\n"])), function (props) { return (props.show ? "block" : "none"); }, function (props) { return (props.show ? 5000000 : -5); }, (0, mixins_1.transition)("opacity 0.1s"), function (props) { return (props.invert ? greyColor10 : greyColor100); }, function (props) { return (props.invert ? greyColor100 : white); }, greyColor15, function (_a) {
|
|
24
24
|
var position = _a.position, fixPos = _a.fixPos;
|
|
25
25
|
return (0, util_1.positionTooltip)({ position: position, fixPos: fixPos });
|
|
26
26
|
});
|
|
27
|
-
exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: none;\n background: inherit;\n font-size: inherit;\n"], ["\n border: none;\n background: inherit;\n font-size: inherit;\n"])));
|
|
27
|
+
exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: none;\n background: inherit;\n font-size: inherit;\n width: 100%;\n"], ["\n border: none;\n background: inherit;\n font-size: inherit;\n width: 100%;\n"])));
|
|
28
28
|
exports.StyledArrowOutline = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n width: 1rem;\n height: 1rem;\n position: absolute;\n clip-path: polygon(", ");\n ", ";\n"], ["\n background-color: ", ";\n width: 1rem;\n height: 1rem;\n position: absolute;\n clip-path: polygon(", ");\n ", ";\n"])), greyColor15, function (_a) {
|
|
29
29
|
var position = _a.position;
|
|
30
30
|
return clipPaths[position];
|
|
@@ -109,6 +109,7 @@ exports.default = {
|
|
|
109
109
|
invert: false,
|
|
110
110
|
align: 'right',
|
|
111
111
|
popOutOfOverflowHiddenParent: false, // dev
|
|
112
|
+
tooltip: false,
|
|
112
113
|
},
|
|
113
114
|
parameters: {
|
|
114
115
|
docs: {
|
|
@@ -118,16 +119,16 @@ exports.default = {
|
|
|
118
119
|
};
|
|
119
120
|
var ActionMenu = function (args) {
|
|
120
121
|
args.actions = [
|
|
121
|
-
__assign({ display: args.action1 }, (args.optionIcon1 ? { icon: args.optionIcon1 } : {})),
|
|
122
|
-
__assign({ display: args.action2 }, (args.optionIcon2 ? { icon: args.optionIcon2 } : {})),
|
|
123
|
-
__assign({ display: args.action3 }, (args.optionIcon3 ? { icon: args.optionIcon3 } : {})),
|
|
122
|
+
__assign({ display: args.action1 }, (args.optionIcon1 ? { icon: args.optionIcon1, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
|
|
123
|
+
__assign({ display: args.action2 }, (args.optionIcon2 ? { icon: args.optionIcon2, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
|
|
124
|
+
__assign({ display: args.action3 }, (args.optionIcon3 ? { icon: args.optionIcon3, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
|
|
124
125
|
];
|
|
125
126
|
args.M = args.buttonSize === 'M';
|
|
126
127
|
return (react_1.default.createElement("div", { style: args.popOutOfOverflowHiddenParent
|
|
127
128
|
? { border: '2px solid lightgrey', height: '90vh', overflow: 'scroll' }
|
|
128
129
|
: {} },
|
|
129
130
|
react_1.default.createElement("div", { style: { height: '1000px' } },
|
|
130
|
-
react_1.default.createElement("div", { style: __assign({ padding: '4rem
|
|
131
|
+
react_1.default.createElement("div", { style: __assign({ padding: '4rem 40rem', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white }, (args.popOutOfOverflowHiddenParent
|
|
131
132
|
? {
|
|
132
133
|
background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.greyColor5,
|
|
133
134
|
height: '50px',
|
|
@@ -22,17 +22,17 @@ var _RadioListMultiQuestion = function (args) {
|
|
|
22
22
|
console.log({ valueParent: value });
|
|
23
23
|
return (React.createElement("div", { style: { background: args.invert ? themes_1.colors.greyColor100 : '' } },
|
|
24
24
|
React.createElement(RadioListMultiQuestion_1.default, { label: "When shopping online, how often do you do each of the following?", subQuestionLabels: [
|
|
25
|
-
{ display: 'Visit multiple websites', value: 'visit_multiple_websites' },
|
|
26
|
-
{ display: 'Read customer reviews', value: 'read_customer_reviews' },
|
|
27
|
-
{ display: 'Watch a video demonstration', value: 'watch_video_demo' },
|
|
28
|
-
{ display: 'Check the delivery date', value: 'check_delivery_date' },
|
|
29
|
-
{ display: 'Check for payment options', value: 'check_payment_options' },
|
|
25
|
+
{ display: 'Visit multiple websites Visit multiple websites', value: 'visit_multiple_websites' },
|
|
26
|
+
{ display: 'Read customer reviews Read customer reviews ', value: 'read_customer_reviews' },
|
|
27
|
+
{ display: 'Watch a video demonstration Watch a video demonstration', value: 'watch_video_demo' },
|
|
28
|
+
{ display: 'Check the delivery date Check the delivery date', value: 'check_delivery_date' },
|
|
29
|
+
{ display: 'Check for payment options Check for payment options', value: 'check_payment_options' },
|
|
30
30
|
], options: [
|
|
31
|
-
{ display: 'Never', value: 'never' },
|
|
32
|
-
{ display: 'Rarely', value: 'rarely' },
|
|
33
|
-
{ display: 'Sometimes', value: 'sometimes' },
|
|
34
|
-
{ display: 'Often', value: 'often' },
|
|
35
|
-
{ display: 'Always', value: 'always' },
|
|
31
|
+
{ display: 'Never Never Never Never ', value: 'never' },
|
|
32
|
+
{ display: 'Rarely Rarely Rarely Rarely ', value: 'rarely' },
|
|
33
|
+
{ display: 'Sometimes Sometimes Sometimes Sometimes ', value: 'sometimes' },
|
|
34
|
+
{ display: 'Often Often Often Often ', value: 'often' },
|
|
35
|
+
{ display: 'Always Always Always Always ', value: 'always' },
|
|
36
36
|
], sublabel: "Select all that apply", value: value, onChange: function (id, value) { return setValue(value); }, readOnly: args.readOnly })));
|
|
37
37
|
};
|
|
38
38
|
exports._RadioListMultiQuestion = _RadioListMultiQuestion;
|