oolib 2.176.2 → 2.176.3
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/index.d.ts +2 -1
- package/dist/index.js +6 -3
- package/dist/stories/v2/components/Switches.stories.js +4 -4
- package/dist/v2/components/Switches/index.js +5 -4
- package/dist/v2/components/Switches/styled.d.ts +1 -3
- package/dist/v2/components/Switches/styled.js +24 -30
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,6 @@ export * from "./components/InlineAlert";
|
|
|
8
8
|
export * from "./components/TextInputs";
|
|
9
9
|
export * from "./components/Container";
|
|
10
10
|
export * from "./components/Wrappers";
|
|
11
|
-
export * from "./components/Switches";
|
|
12
11
|
export * from "./components/TabBar";
|
|
13
12
|
export * from "./components/Margins";
|
|
14
13
|
export * from "./components/Paddings";
|
|
@@ -20,6 +19,7 @@ export * from "./v2/components/Typo2";
|
|
|
20
19
|
export * from "./v2/components/BlockLabel";
|
|
21
20
|
export { colors } from "./themes";
|
|
22
21
|
export { icons } from "./icons";
|
|
22
|
+
export { SwitchDouble } from "./components/Switches";
|
|
23
23
|
export { Section } from "./components/Section";
|
|
24
24
|
export { UserRoleBadge } from "./components/UserRoleBadge";
|
|
25
25
|
export { OKELink } from "./components/OKELink";
|
|
@@ -77,6 +77,7 @@ export { CheckboxList } from "./v2/components/RadioAndCheckbox/comps/CheckboxLis
|
|
|
77
77
|
export { CheckboxInput } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput";
|
|
78
78
|
export { CheckboxButton } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton";
|
|
79
79
|
export { RadioList } from "./v2/components/RadioAndCheckbox/comps/RadioList/index";
|
|
80
|
+
export { SwitchSingle } from "./v2/components/Switches";
|
|
80
81
|
export * as baseStyling from "./v2/themes/utils/baseStyling";
|
|
81
82
|
export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
|
|
82
83
|
export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";
|
package/dist/index.js
CHANGED
|
@@ -39,8 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
39
39
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
40
40
|
};
|
|
41
41
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
42
|
-
exports.
|
|
43
|
-
exports.baseStyling = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.DataVizAccordion = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = void 0;
|
|
42
|
+
exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.SwitchDouble = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
|
|
43
|
+
exports.baseStyling = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.DataVizAccordion = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.HintsProvider = 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;
|
|
44
44
|
//css and styling related ( styled-components )
|
|
45
45
|
var globalStyles_1 = require("./globalStyles");
|
|
46
46
|
Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
|
|
@@ -71,7 +71,8 @@ __exportStar(require("./components/InlineAlert"), exports);
|
|
|
71
71
|
__exportStar(require("./components/TextInputs"), exports);
|
|
72
72
|
__exportStar(require("./components/Container"), exports);
|
|
73
73
|
__exportStar(require("./components/Wrappers"), exports);
|
|
74
|
-
|
|
74
|
+
var Switches_1 = require("./components/Switches");
|
|
75
|
+
Object.defineProperty(exports, "SwitchDouble", { enumerable: true, get: function () { return Switches_1.SwitchDouble; } });
|
|
75
76
|
__exportStar(require("./components/TabBar"), exports);
|
|
76
77
|
// export {
|
|
77
78
|
// RadioButton,
|
|
@@ -244,4 +245,6 @@ var index_2 = require("./v2/components/RadioAndCheckbox/comps/RadioList/comps/Ra
|
|
|
244
245
|
Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return index_2.RadioInput; } });
|
|
245
246
|
var index_3 = require("./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index");
|
|
246
247
|
Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return index_3.RadioButton; } });
|
|
248
|
+
var Switches_2 = require("./v2/components/Switches");
|
|
249
|
+
Object.defineProperty(exports, "SwitchSingle", { enumerable: true, get: function () { return Switches_2.SwitchSingle; } });
|
|
247
250
|
exports.baseStyling = __importStar(require("./v2/themes/utils/baseStyling"));
|
|
@@ -76,8 +76,8 @@ var SwitchDouble = function (args) {
|
|
|
76
76
|
};
|
|
77
77
|
exports.SwitchDouble = SwitchDouble;
|
|
78
78
|
exports.SwitchDouble.args = {
|
|
79
|
-
rightOption: '
|
|
80
|
-
leftOption: '
|
|
79
|
+
rightOption: 'Right Option',
|
|
80
|
+
leftOption: 'Left Option',
|
|
81
81
|
disabled: false,
|
|
82
82
|
invert: false,
|
|
83
83
|
saveValueAsString: true,
|
|
@@ -89,7 +89,7 @@ exports.SwitchDouble.argTypes = {
|
|
|
89
89
|
defaultValue: 'style1'
|
|
90
90
|
},
|
|
91
91
|
rightOption: {
|
|
92
|
-
name: 'Right
|
|
92
|
+
name: 'Right Option'
|
|
93
93
|
},
|
|
94
94
|
leftOption: {
|
|
95
95
|
name: "Left Option"
|
|
@@ -121,7 +121,7 @@ exports.SwitchSingle.parameters = {
|
|
|
121
121
|
controls: { exclude: ['leftOption'] }
|
|
122
122
|
};
|
|
123
123
|
exports.SwitchSingle.args = {
|
|
124
|
-
rightOption: '
|
|
124
|
+
rightOption: 'Right Option',
|
|
125
125
|
layoutStyle: 'style1',
|
|
126
126
|
disabled: false,
|
|
127
127
|
invert: false,
|
|
@@ -52,6 +52,7 @@ var BlockLabel_1 = require("../BlockLabel");
|
|
|
52
52
|
var styled_1 = require("./styled");
|
|
53
53
|
var Tooltip_1 = require("../../../components/Tooltip");
|
|
54
54
|
var utilsOolib_1 = require("../../../utilsOolib");
|
|
55
|
+
var Typo2_1 = require("../Typo2");
|
|
55
56
|
function SwitchDouble(_a) {
|
|
56
57
|
var id = _a.id, valueProp = _a.value, options = _a.options, onChange = _a.onChange, saveValueAsString = _a.saveValueAsString, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
57
58
|
var value = saveValueAsString
|
|
@@ -69,7 +70,7 @@ function SwitchDouble(_a) {
|
|
|
69
70
|
throw new Error("You need to pass a value prop to make SwitchDouble work");
|
|
70
71
|
return (react_1.default.createElement("div", null,
|
|
71
72
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
|
|
72
|
-
react_1.default.createElement(
|
|
73
|
+
react_1.default.createElement(StyledSwitchWrapperStyle1, null,
|
|
73
74
|
react_1.default.createElement(styled_1.STYLED_UI_BODY_SM, { lineHeight: 1,
|
|
74
75
|
semibold: isLeftOptionActive ? true : false }, options[0].display),
|
|
75
76
|
react_1.default.createElement(styled_1.StyledButtonSlider, { disabled: disabled, onClick: handleClick },
|
|
@@ -123,7 +124,7 @@ function SwitchSingle(_a) {
|
|
|
123
124
|
//else
|
|
124
125
|
return display; //cuz ofcourse its not optional, so no need to show optional label
|
|
125
126
|
};
|
|
126
|
-
var genDisplayText = function () { return (react_1.default.createElement(
|
|
127
|
+
var genDisplayText = function () { return (react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { disabled: disabled }, injectOptionalLabelIntoDisplayText({
|
|
127
128
|
display: option.display,
|
|
128
129
|
label: props.label,
|
|
129
130
|
isRequired: props.isRequired
|
|
@@ -135,9 +136,9 @@ function SwitchSingle(_a) {
|
|
|
135
136
|
};
|
|
136
137
|
return (react_1.default.createElement("div", null,
|
|
137
138
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({ hideOptionalLabel: !!props.label === false }, (0, _EXPORTS_1.getBlockLabelProps)(props))),
|
|
138
|
-
layoutStyle === "style1" ? (react_1.default.createElement(styled_1.
|
|
139
|
+
layoutStyle === "style1" ? (react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
|
|
139
140
|
genSwitch(),
|
|
140
|
-
genSwitchDisplay())) : (layoutStyle === "style2" && (react_1.default.createElement(styled_1.
|
|
141
|
+
genSwitchDisplay())) : (layoutStyle === "style2" && (react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
|
|
141
142
|
genSwitchDisplay(),
|
|
142
143
|
genSwitch())))));
|
|
143
144
|
}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
export const
|
|
2
|
-
export const StyledSwitchWrapperStyle2: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
1
|
+
export const StyledSwitchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
2
|
export const StyledButtonSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
3
|
export const StyledSwitch: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
5
|
-
export const STYLED_UI_BODY_SM: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;
|
|
@@ -7,16 +7,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.
|
|
10
|
+
exports.StyledSwitch = exports.StyledButtonSlider = exports.StyledSwitchWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var themes_1 = require("../../themes");
|
|
13
13
|
var mixins_1 = require("../../../themes/mixins");
|
|
14
14
|
var getDynamicColors_1 = require("../../themes/utils/getDynamicColors");
|
|
15
15
|
var Typo2_1 = require("../Typo2");
|
|
16
|
+
var baseStyling_1 = require("../../themes/utils/baseStyling");
|
|
16
17
|
var white = themes_1.colors.white, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey20 = themes_1.colors.grey20, grey40 = themes_1.colors.grey40, grey70 = themes_1.colors.grey70, grey80 = themes_1.colors.grey80;
|
|
17
|
-
exports.
|
|
18
|
-
exports.
|
|
19
|
-
exports.StyledButtonSlider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 28px;\n height: 18px;\n user-select: none;\n position: relative;\n border-radius: 1rem;\n cursor: ", ";\n background-color: ", ";\n \n &:hover {\n background-color: ", ";\n\n & > .StyledSwitch {\n border-color: ", ";\n }\n }\n\n ", "\n"], ["\n width: 28px;\n height: 18px;\n user-select: none;\n position: relative;\n border-radius: 1rem;\n cursor: ", ";\n background-color: ", ";\n \n &:hover {\n background-color: ", ";\n\n & > .StyledSwitch {\n border-color: ", ";\n }\n }\n\n ", "\n"])), function (_a) {
|
|
18
|
+
exports.StyledSwitchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n ", "{\n gap: 6px;\n }\n \n \n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n ", "{\n gap: 6px;\n }\n \n \n"])), (0, mixins_1.mediaQuery)('md'));
|
|
19
|
+
exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 3.6rem;\n height: 2.4rem;\n ", "{\n width: 2.8rem;\n height: 1.8rem;\n }\n border-radius: 4rem;\n\n user-select: none;\n position: relative;\n cursor: ", ";\n background-color: ", ";\n overflow: hidden; //so that this hover below is within bounds\n ", "\n\n \n"], ["\n width: 3.6rem;\n height: 2.4rem;\n ", "{\n width: 2.8rem;\n height: 1.8rem;\n }\n border-radius: 4rem;\n\n user-select: none;\n position: relative;\n cursor: ", ";\n background-color: ", ";\n overflow: hidden; //so that this hover below is within bounds\n ", "\n\n \n"])), (0, mixins_1.mediaQuery)('md'), function (_a) {
|
|
20
20
|
var disabled = _a.disabled;
|
|
21
21
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
22
22
|
}, function (_a) {
|
|
@@ -25,38 +25,32 @@ exports.StyledButtonSlider = styled_components_1.default.div(templateObject_3 ||
|
|
|
25
25
|
return grey5;
|
|
26
26
|
return inactive ? grey10 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
|
|
27
27
|
}, function (_a) {
|
|
28
|
-
var
|
|
29
|
-
return !disabled && (
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
var disabled = _a.disabled;
|
|
29
|
+
return !disabled && (0, baseStyling_1.applyBlackOverlayOnHover)();
|
|
30
|
+
});
|
|
31
|
+
var desktop_size = 1.2;
|
|
32
|
+
var desktop_left_right_gap = 0.3;
|
|
33
|
+
var mob_size = 1.4;
|
|
34
|
+
var mob_left_right_gap = 0.5;
|
|
35
|
+
exports.StyledSwitch = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n \n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n\n ", "{\n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n }\n\n z-index: 1; //so that this is above the blackoverlay hover above\n background-color: ", "; \n outline: none;\n border-radius: 50%; \n cursor: ", "; \n border: 1px solid; \n border-color: ", ";\n position: absolute;\n \n box-shadow: ", ";\n \n \n \n"], ["\n \n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n\n ", "{\n width: ", "rem; \n height: ", "rem;\n top: calc(50% - ", "rem); /* Updated for vertical centering */\n left: ", "; \n ", "\n }\n\n z-index: 1; //so that this is above the blackoverlay hover above\n background-color: ", "; \n outline: none;\n border-radius: 50%; \n cursor: ", "; \n border: 1px solid; \n border-color: ", ";\n position: absolute;\n \n box-shadow: ", ";\n \n \n \n"])), mob_size, mob_size, mob_size / 2, function (_a) {
|
|
36
|
+
var direction = _a.direction;
|
|
37
|
+
return direction === 'left' ? mob_left_right_gap + 'rem' : "calc(100% - ".concat(mob_size + mob_left_right_gap, "rem)");
|
|
38
|
+
}, (0, mixins_1.transition)('left 0.15s ease-out'), (0, mixins_1.mediaQuery)('md'), desktop_size, desktop_size, desktop_size / 2, function (_a) {
|
|
39
|
+
var direction = _a.direction;
|
|
40
|
+
return direction === 'left' ? desktop_left_right_gap + 'rem' : "calc(100% - ".concat(desktop_size + desktop_left_right_gap, "rem)");
|
|
41
|
+
}, (0, mixins_1.transition)('left 0.1s ease-out'), function (_a) {
|
|
35
42
|
var disabled = _a.disabled;
|
|
36
43
|
return (disabled ? "" : white);
|
|
37
|
-
},
|
|
44
|
+
}, function (_a) {
|
|
38
45
|
var disabled = _a.disabled;
|
|
39
46
|
return disabled ? 'not-allowed' : 'pointer';
|
|
40
47
|
}, function (_a) {
|
|
41
|
-
var
|
|
42
|
-
disabled
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}, function (_a) {
|
|
46
|
-
var direction = _a.direction;
|
|
47
|
-
return direction === 'left' ? '3px' : 'calc(100% - 15px)';
|
|
48
|
+
var theme = _a.theme, inactive = _a.inactive, disabled = _a.disabled;
|
|
49
|
+
return disabled
|
|
50
|
+
? grey20
|
|
51
|
+
: inactive ? grey70 : (0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors);
|
|
48
52
|
}, function (_a) {
|
|
49
53
|
var disabled = _a.disabled;
|
|
50
54
|
return (disabled ? "" : "0px 4px 6px rgba(0, 0, 0, 0.25)");
|
|
51
|
-
}, exports.StyledButtonSlider, function (_a) {
|
|
52
|
-
var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
|
|
53
|
-
return !disabled && (inactive ? grey40 : (0, getDynamicColors_1.getOnPrimary)(colors));
|
|
54
55
|
});
|
|
55
|
-
|
|
56
|
-
var disabled = _a.disabled;
|
|
57
|
-
return (disabled ? grey40 : grey80);
|
|
58
|
-
}, function (_a) {
|
|
59
|
-
var lineHeight = _a.lineHeight;
|
|
60
|
-
return lineHeight;
|
|
61
|
-
}, (0, mixins_1.transition)('color'));
|
|
62
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
56
|
+
var templateObject_1, templateObject_2, templateObject_3;
|