oolib 2.240.0 → 3.0.0
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/Accordion/index.js +1 -1
- package/dist/components/ActionMenu/index.d.ts +1 -1
- package/dist/components/ActionMenu/index.js +2 -2
- package/dist/components/DatePicker/index.js +3 -3
- package/dist/components/HomeCover/index.js +1 -1
- package/dist/components/ImageInput/comps/ImageEditor/comps/EditToolbar/index.js +6 -6
- package/dist/components/Modals/ModalConfirm/index.js +2 -2
- package/dist/components/PDFInput/index.js +2 -2
- package/dist/components/TabBar/index.js +3 -3
- package/dist/components/VideoInput/comps/EmbedLinkModal.js +1 -1
- package/dist/components/VideoInput/index.js +3 -3
- package/dist/index.d.ts +1 -3
- package/dist/index.js +5 -7
- package/dist/stories/Oolib/components/HomeCover.stories.js +1 -1
- package/dist/stories/Oolib/components/ModalConfirmAction.stories.js +1 -1
- package/dist/stories/Oolib/components/Tooltip.stories.js +0 -1
- package/dist/v2/components/Hints/index.js +1 -1
- package/dist/v2/components/TabBar/index.js +3 -3
- package/package.json +1 -1
- package/dist/components/Buttons/index.d.ts +0 -75
- package/dist/components/Buttons/index.js +0 -107
- package/dist/components/Buttons/styled.d.ts +0 -33
- package/dist/components/Buttons/styled.js +0 -231
- package/dist/stories/Oolib/components/Button.stories.d.ts +0 -197
- package/dist/stories/Oolib/components/Button.stories.js +0 -161
|
@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
exports.Accordion = void 0;
|
|
37
37
|
var framer_motion_1 = require("framer-motion");
|
|
38
38
|
var react_1 = __importStar(require("react"));
|
|
39
|
-
var Buttons_1 = require("
|
|
39
|
+
var Buttons_1 = require("../../v2/components/Buttons");
|
|
40
40
|
var Typo_1 = require("../Typo");
|
|
41
41
|
var colors_1 = require("../../themes/colors");
|
|
42
42
|
var utilsOolib_1 = require("../../utilsOolib");
|
|
@@ -46,7 +46,7 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
46
46
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
47
|
exports.ActionMenu = void 0;
|
|
48
48
|
var react_1 = __importStar(require("react"));
|
|
49
|
-
var ButtonComps = __importStar(require("
|
|
49
|
+
var ButtonComps = __importStar(require("../../v2/components/Buttons"));
|
|
50
50
|
var Typo_1 = require("../Typo");
|
|
51
51
|
var icons_1 = require("../../icons");
|
|
52
52
|
var useHandleClickOutside_1 = require("../../utils/customHooks/useHandleClickOutside");
|
|
@@ -154,7 +154,7 @@ var ActionMenu = function (_a) {
|
|
|
154
154
|
} },
|
|
155
155
|
react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function () {
|
|
156
156
|
setShowActions(!showActions);
|
|
157
|
-
} }))) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize,
|
|
157
|
+
} }))) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, stopPropagation: true, preventDefault: true, onClick: function (e) {
|
|
158
158
|
setShowActions(!showActions);
|
|
159
159
|
}, active: showActions })))),
|
|
160
160
|
popOutOfOverflowHiddenParent && (react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef })),
|
|
@@ -53,7 +53,7 @@ var buildCalenderObj_1 = require("./utils/buildCalenderObj");
|
|
|
53
53
|
var handlePos_1 = require("./utils/handlePos");
|
|
54
54
|
var themes_1 = require("../../themes");
|
|
55
55
|
var styled_1 = require("./styled");
|
|
56
|
-
var Buttons_1 = require("
|
|
56
|
+
var Buttons_1 = require("../../v2/components/Buttons");
|
|
57
57
|
var mixins_1 = require("../../themes/mixins");
|
|
58
58
|
var Modal_1 = require("../Modals/Modal");
|
|
59
59
|
var white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40;
|
|
@@ -251,10 +251,10 @@ function DatePicker(props) {
|
|
|
251
251
|
setRange(item);
|
|
252
252
|
};
|
|
253
253
|
var wrapCaretLeft = react_1.default.useCallback(function () {
|
|
254
|
-
return (react_1.default.createElement(Buttons_1.ButtonGhost, {
|
|
254
|
+
return (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer" } }));
|
|
255
255
|
}, [value, invert]);
|
|
256
256
|
var wrapCaretRight = react_1.default.useCallback(function () {
|
|
257
|
-
return (react_1.default.createElement(Buttons_1.ButtonGhost, {
|
|
257
|
+
return (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer" } }));
|
|
258
258
|
}, [value, invert]);
|
|
259
259
|
var getReadOnlyDate = function () {
|
|
260
260
|
var dateObj = new Date(value);
|
|
@@ -49,7 +49,7 @@ var react_1 = __importStar(require("react"));
|
|
|
49
49
|
var react_router_dom_1 = require("react-router-dom");
|
|
50
50
|
// import { useScreenWidth } from "../../utils/customHooks/useScreenWidth";
|
|
51
51
|
var toArray_1 = require("../../utils/toArray");
|
|
52
|
-
var Buttons_1 = require("
|
|
52
|
+
var Buttons_1 = require("../../v2/components/Buttons");
|
|
53
53
|
var mixins_1 = require("../../themes/mixins");
|
|
54
54
|
var Typo_1 = require("../Typo");
|
|
55
55
|
var styled_1 = require("./styled");
|
|
@@ -49,7 +49,7 @@ var lodash_1 = require("lodash");
|
|
|
49
49
|
var react_1 = __importStar(require("react"));
|
|
50
50
|
var changesMadeToUnderEditImageData_1 = require("../../utils/changesMadeToUnderEditImageData");
|
|
51
51
|
var themes_1 = require("../../../../../../themes");
|
|
52
|
-
var Buttons_1 = require("
|
|
52
|
+
var Buttons_1 = require("../../../../../../v2/components/Buttons");
|
|
53
53
|
/**
|
|
54
54
|
* fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
|
|
55
55
|
*/
|
|
@@ -68,14 +68,14 @@ function EditToolbar(_a) {
|
|
|
68
68
|
gap: "0.5rem",
|
|
69
69
|
} },
|
|
70
70
|
!omitEditorTools.includes('cover_contain') &&
|
|
71
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, {
|
|
71
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { iconColor: themes_1.colors.white, iconSize: "M", onClick: function () {
|
|
72
72
|
return setUnderEditImageData(function (prev) {
|
|
73
73
|
var spreadToSet = imageSpread === "cover" ? "contain" : "cover";
|
|
74
74
|
return __assign(__assign(__assign({}, prev), { imageSpread: spreadToSet }), (spreadToSet === "contain" ? { cropX: 0, cropY: 0 } : {}));
|
|
75
75
|
});
|
|
76
76
|
}, icon: imageSpread === "cover" ? "ArrowsIn" : "ArrowsOut" }),
|
|
77
77
|
!omitEditorTools.includes('rotate') &&
|
|
78
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, {
|
|
78
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { iconColor: themes_1.colors.white, icon: "ArrowsClockwise", iconSize: "M", onClick: function () {
|
|
79
79
|
setUnderEditImageData(function (prev) { return (__assign(__assign({}, prev), { imageRotate: ((prev.imageRotate || 0) + 90) % 360 })); });
|
|
80
80
|
} })),
|
|
81
81
|
react_1.default.createElement("div", { style: {
|
|
@@ -87,10 +87,10 @@ function EditToolbar(_a) {
|
|
|
87
87
|
underEditImageData: underEditImageData,
|
|
88
88
|
defaultImageSpread: defaultImageSpread,
|
|
89
89
|
}) && (react_1.default.createElement(react_1.Fragment, null,
|
|
90
|
-
react_1.default.createElement(Buttons_1.ButtonSecondary, {
|
|
90
|
+
react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () {
|
|
91
91
|
setUnderEditImageData((0, lodash_1.cloneDeep)(imageData));
|
|
92
92
|
} }, "Revert"),
|
|
93
|
-
react_1.default.createElement(Buttons_1.ButtonPrimary, {
|
|
93
|
+
react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: function () {
|
|
94
94
|
handleSingleImageDataChange({
|
|
95
95
|
publicUrl: publicUrl,
|
|
96
96
|
imageData: __assign(__assign({}, underEditImageData), { caption: imageData.caption //cuz caption edits are made directly to imageData and we dont want underEditImageData to overwrite that.
|
|
@@ -99,7 +99,7 @@ function EditToolbar(_a) {
|
|
|
99
99
|
setUnderEditImageData(undefined);
|
|
100
100
|
setImageUnderEdit && setImageUnderEdit(false);
|
|
101
101
|
} }, "Save"))),
|
|
102
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, {
|
|
102
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { iconColor: themes_1.colors.white, icon: "X", onClick: function () {
|
|
103
103
|
setUnderEditImageData(undefined);
|
|
104
104
|
} }))));
|
|
105
105
|
}
|
|
@@ -38,7 +38,7 @@ var react_1 = __importStar(require("react"));
|
|
|
38
38
|
var react_dom_1 = require("react-dom");
|
|
39
39
|
var mixins_1 = require("../../../themes/mixins");
|
|
40
40
|
var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
|
|
41
|
-
var Buttons_1 = require("
|
|
41
|
+
var Buttons_1 = require("../../../v2/components/Buttons");
|
|
42
42
|
var Typo_1 = require("../../Typo");
|
|
43
43
|
var styled_1 = require("./styled");
|
|
44
44
|
/**
|
|
@@ -70,7 +70,7 @@ var ModalConfirm = function (_a) {
|
|
|
70
70
|
var SubTitleText = screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? Typo_1.SANS_4 : Typo_1.SANS_3;
|
|
71
71
|
var genModalContents = function () { return (react_1.default.createElement(react_1.Fragment, null,
|
|
72
72
|
onClose && (react_1.default.createElement(styled_1.StyledModalConfirmClose, null,
|
|
73
|
-
react_1.default.createElement(Buttons_1.ButtonPrimary, {
|
|
73
|
+
react_1.default.createElement(Buttons_1.ButtonPrimary, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))),
|
|
74
74
|
react_1.default.createElement(styled_1.StyledModalConfirmContent, null,
|
|
75
75
|
title && (react_1.default.createElement("div", null,
|
|
76
76
|
react_1.default.createElement(Typo_1.SERIF_5_6, null, title))),
|
|
@@ -66,7 +66,7 @@ var react_1 = __importStar(require("react"));
|
|
|
66
66
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
67
67
|
var BlockLabel_1 = require("../../v2/components/BlockLabel");
|
|
68
68
|
var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
|
|
69
|
-
var Buttons_1 = require("
|
|
69
|
+
var Buttons_1 = require("../../v2/components/Buttons");
|
|
70
70
|
var bannerContext_1 = require("../Banners/bannerContext");
|
|
71
71
|
var PDFEmbed_1 = __importDefault(require("./comps/PDFEmbed"));
|
|
72
72
|
var react_2 = require("react");
|
|
@@ -119,7 +119,7 @@ function PDFInput(_a) {
|
|
|
119
119
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props), { invert: invert })),
|
|
120
120
|
(readOnly && value) ? (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement(PDFEmbed_1.default, { key: i, filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation })); }))
|
|
121
121
|
: !value || (value === null || value === void 0 ? void 0 : value.length) === 0 && !isLoading ? (react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: "18rem", isLoading: isLoading, mediaType: "pdf", handleUpload: handleUpload, onChange: parentOnChange, uploadProgress: uploadProgress, enableClickUpload: false },
|
|
122
|
-
react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf"
|
|
122
|
+
react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf" }))) : (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement("div", { style: { position: 'relative' }, key: i },
|
|
123
123
|
react_1.default.createElement(PDFEmbed_1.default, { filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation }),
|
|
124
124
|
react_1.default.createElement(StyledActionsButtonWrapper, null,
|
|
125
125
|
react_1.default.createElement(PDFActions_1.PDFActions, { id: id, isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange })))); })),
|
|
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var useScrollBar_1 = require("../../utils/customHooks/useScrollBar");
|
|
20
|
-
var Buttons_1 = require("
|
|
20
|
+
var Buttons_1 = require("../../v2/components/Buttons");
|
|
21
21
|
var index_styled_1 = require("./index.styled");
|
|
22
22
|
var Base = function (_a) {
|
|
23
23
|
var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
|
|
@@ -31,7 +31,7 @@ var Base = function (_a) {
|
|
|
31
31
|
return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
|
|
32
32
|
react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
|
|
33
33
|
!scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
|
|
34
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, {
|
|
34
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
|
|
35
35
|
react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
|
|
36
36
|
react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX }, options.map(function (op) {
|
|
37
37
|
var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
|
|
@@ -42,7 +42,7 @@ var Base = function (_a) {
|
|
|
42
42
|
tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
|
|
43
43
|
}))),
|
|
44
44
|
!scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
|
|
45
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, {
|
|
45
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
|
|
46
46
|
};
|
|
47
47
|
var TabBarStyle1 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" })); };
|
|
48
48
|
exports.TabBarStyle1 = TabBarStyle1;
|
|
@@ -37,7 +37,7 @@ exports.EmbedLinkModal = void 0;
|
|
|
37
37
|
var react_1 = __importStar(require("react"));
|
|
38
38
|
var Modal_1 = require("../../Modals/Modal");
|
|
39
39
|
var Paddings_1 = require("../../Paddings");
|
|
40
|
-
var Buttons_1 = require("
|
|
40
|
+
var Buttons_1 = require("../../../v2/components/Buttons");
|
|
41
41
|
var styled_1 = require("../styled");
|
|
42
42
|
var utils_1 = require("../utils");
|
|
43
43
|
var TextInputs_1 = require("../../../v2/components/TextInputs");
|
|
@@ -52,7 +52,7 @@ var styled_components_1 = require("styled-components");
|
|
|
52
52
|
var react_player_1 = __importDefault(require("react-player"));
|
|
53
53
|
var BlockLabel_1 = require("../../v2/components/BlockLabel");
|
|
54
54
|
var styled_1 = require("./styled");
|
|
55
|
-
var Buttons_1 = require("
|
|
55
|
+
var Buttons_1 = require("../../v2/components/Buttons");
|
|
56
56
|
var Typo_1 = require("../Typo");
|
|
57
57
|
var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
|
|
58
58
|
var themes_1 = require("../../themes");
|
|
@@ -146,10 +146,10 @@ function VideoInput(_a) {
|
|
|
146
146
|
(value === null || value === void 0 ? void 0 : value.length) > 0 ? (createVideoPreview({ value: value, actionMenuButton: true })) :
|
|
147
147
|
react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: '18rem', isLoading: isLoading, uploadProgress: uploadProgress, enableClickUpload: false, mediaType: 'video', handleUpload: handleUpload },
|
|
148
148
|
react_1.default.createElement(styled_1.StyledInnerWrapper, null,
|
|
149
|
-
react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Add Video link", icon: "Plus", onClick: function () { return setShowEmbedLinkModal(true); }
|
|
149
|
+
react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Add Video link", icon: "Plus", onClick: function () { return setShowEmbedLinkModal(true); } }),
|
|
150
150
|
enableVideoUpload && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
151
151
|
react_1.default.createElement(Typo_1.SANS_2, { semibold: true, color: invert ? themes_1.colors.white_opacity60 : themes_1.colors.greyColor80 }, "OR"),
|
|
152
|
-
react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple",
|
|
152
|
+
react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple", id: "videoField" }))))),
|
|
153
153
|
showEmbedLinkModal && (react_1.default.createElement(EmbedLinkModal_1.EmbedLinkModal, { setShowEmbedLinkModal: setShowEmbedLinkModal, value: value, createVideoPreview: createVideoPreview, onChange: onChange, id: id, invert: invert })),
|
|
154
154
|
react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
|
|
155
155
|
, accept: "video/*", ref: inputRef, style: { display: "none" }, id: "videoField", onChange: function (v) {
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ export { GlobalStyles } from "./globalStyles";
|
|
|
2
2
|
export * from "./themes/mixins";
|
|
3
3
|
export * from "./components/Typo";
|
|
4
4
|
export * from "./globalStyles/globalVariables";
|
|
5
|
-
export * from "./components/Buttons";
|
|
6
5
|
export * from "./components/Breadcrumbs";
|
|
7
6
|
export * from "./components/InlineAlert";
|
|
8
7
|
export * from "./components/Container";
|
|
@@ -30,7 +29,6 @@ export { ModalForms } from "./components/Modals/derivedComps/ModalForms";
|
|
|
30
29
|
export { Modal } from "./components/Modals/Modal";
|
|
31
30
|
export { ModalSmall } from "./components/Modals/derivedComps/ModalSmall";
|
|
32
31
|
export { EmptyStates } from "./components/EmptyStates";
|
|
33
|
-
export { HomeCover } from "./components/HomeCover";
|
|
34
32
|
export { PageScrollIndicator } from "./components/PageScrollIndicator";
|
|
35
33
|
export { TextLoader } from "./components/LoadersAndProgress/TextLoader";
|
|
36
34
|
export { default as DatePicker } from "./components/DatePicker";
|
|
@@ -83,7 +81,7 @@ export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";
|
|
|
83
81
|
export { BannerAlert, BannerInfo } from "./components/Banners";
|
|
84
82
|
export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";
|
|
85
83
|
export { TextInput, EmailInput, NumberInput, PhoneInput, PasswordInput, URLInput } from "./v2/components/TextInputs";
|
|
86
|
-
export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2 } from "./v2/components/Tags";
|
|
84
|
+
export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2, TagSelect as TagSelectV2 } from "./v2/components/Tags";
|
|
87
85
|
export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2, ButtonTertiary as ButtonTertiaryV2, ButtonGhost as ButtonGhostV2, ButtonPrimaryCompact, ButtonSecondaryCompact, ButtonTertiaryCompact, ButtonGhostCompact, ButtonUpload } from "./v2/components/Buttons";
|
|
88
86
|
export { colors as colors2, typo as typoV2_CSS } from "./v2/themes";
|
|
89
87
|
export { RadioInput, RadioButton } from "./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index";
|
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.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.FileUploadWrapper = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = 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.
|
|
43
|
-
exports.TooltipV2 = exports.ListItem = exports.List = exports.LoaderCircleV2 = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.ModalConfirmAction =
|
|
42
|
+
exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.FileUploadWrapper = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = 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.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.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.ProgressBar = exports.applyBlackOverlayOnHover = exports.icons = exports.colors = exports.GlobalStyles = void 0;
|
|
43
|
+
exports.TooltipV2 = exports.ListItem = exports.List = exports.LoaderCircleV2 = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagSelectV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.ModalConfirmAction = void 0;
|
|
44
44
|
exports.FloatingPortal = exports.FloatingFocusManager = exports.useFloatingPosition = exports.baseStyling = void 0;
|
|
45
45
|
//css and styling related ( styled-components )
|
|
46
46
|
var globalStyles_1 = require("./globalStyles");
|
|
@@ -60,7 +60,6 @@ var LoadersAndProgress_1 = require("./components/LoadersAndProgress");
|
|
|
60
60
|
Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return LoadersAndProgress_1.ProgressBar; } });
|
|
61
61
|
var LoadersAndProgress_2 = require("./components/LoadersAndProgress");
|
|
62
62
|
Object.defineProperty(exports, "LoaderOverlay", { enumerable: true, get: function () { return LoadersAndProgress_2.LoaderOverlay; } });
|
|
63
|
-
__exportStar(require("./components/Buttons"), exports);
|
|
64
63
|
var Tags_1 = require("./components/Tags");
|
|
65
64
|
Object.defineProperty(exports, "TagClear", { enumerable: true, get: function () { return Tags_1.TagClear; } });
|
|
66
65
|
Object.defineProperty(exports, "TagLink", { enumerable: true, get: function () { return Tags_1.TagLink; } });
|
|
@@ -101,8 +100,6 @@ var ModalSmall_1 = require("./components/Modals/derivedComps/ModalSmall");
|
|
|
101
100
|
Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
|
|
102
101
|
var EmptyStates_1 = require("./components/EmptyStates");
|
|
103
102
|
Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates_1.EmptyStates; } });
|
|
104
|
-
var HomeCover_1 = require("./components/HomeCover");
|
|
105
|
-
Object.defineProperty(exports, "HomeCover", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
|
|
106
103
|
var PageScrollIndicator_1 = require("./components/PageScrollIndicator");
|
|
107
104
|
Object.defineProperty(exports, "PageScrollIndicator", { enumerable: true, get: function () { return PageScrollIndicator_1.PageScrollIndicator; } });
|
|
108
105
|
var TextLoader_1 = require("./components/LoadersAndProgress/TextLoader");
|
|
@@ -202,6 +199,7 @@ var Tags_2 = require("./v2/components/Tags");
|
|
|
202
199
|
Object.defineProperty(exports, "TagDisplayV2", { enumerable: true, get: function () { return Tags_2.TagDisplay; } });
|
|
203
200
|
Object.defineProperty(exports, "TagLinkV2", { enumerable: true, get: function () { return Tags_2.TagLink; } });
|
|
204
201
|
Object.defineProperty(exports, "TagClearV2", { enumerable: true, get: function () { return Tags_2.TagClear; } });
|
|
202
|
+
Object.defineProperty(exports, "TagSelectV2", { enumerable: true, get: function () { return Tags_2.TagSelect; } });
|
|
205
203
|
var Buttons_1 = require("./v2/components/Buttons");
|
|
206
204
|
Object.defineProperty(exports, "ButtonPrimaryV2", { enumerable: true, get: function () { return Buttons_1.ButtonPrimary; } });
|
|
207
205
|
Object.defineProperty(exports, "ButtonSecondaryV2", { enumerable: true, get: function () { return Buttons_1.ButtonSecondary; } });
|
|
@@ -221,8 +219,8 @@ var MetaBlock_2 = require("./v2/components/MetaBlock");
|
|
|
221
219
|
Object.defineProperty(exports, "MetaBlockV2", { enumerable: true, get: function () { return __importDefault(MetaBlock_2).default; } });
|
|
222
220
|
var DateRangePicker_2 = require("./v2/components/DateRangePicker");
|
|
223
221
|
Object.defineProperty(exports, "DateRangePickerV2", { enumerable: true, get: function () { return DateRangePicker_2.DateRangePicker; } });
|
|
224
|
-
var
|
|
225
|
-
Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function () { return
|
|
222
|
+
var HomeCover_1 = require("./v2/components/HomeCover");
|
|
223
|
+
Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
|
|
226
224
|
//V2 data viz comps
|
|
227
225
|
var Accordion_2 = require("./v2/components/Accordion");
|
|
228
226
|
Object.defineProperty(exports, "AccordionV2", { enumerable: true, get: function () { return Accordion_2.Accordion; } });
|
|
@@ -18,7 +18,7 @@ exports.HomeCover_ = void 0;
|
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var HomeCover_1 = require("../../../components/HomeCover");
|
|
20
20
|
var Typo_1 = require("../../../components/Typo");
|
|
21
|
-
var Buttons_1 = require("../../../components/Buttons");
|
|
21
|
+
var Buttons_1 = require("../../../v2/components/Buttons");
|
|
22
22
|
exports.default = {
|
|
23
23
|
title: "Components/HomeCover",
|
|
24
24
|
argTypes: {
|
|
@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
};
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
14
|
exports.Modal_Confirm_Action = void 0;
|
|
15
|
-
var Buttons_1 = require("../../../components/Buttons");
|
|
15
|
+
var Buttons_1 = require("../../../v2/components/Buttons");
|
|
16
16
|
var ModalConfirmAction_1 = require("../../../components/Modals/derivedComps/ModalConfirmAction");
|
|
17
17
|
var Banners_1 = require("../../../components/Banners");
|
|
18
18
|
var react_1 = require("react");
|
|
@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.Tooltip = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var Tooltip_1 = require("../../../components/Tooltip");
|
|
20
|
-
// import { ButtonPrimary } from '../components/Buttons';
|
|
21
20
|
var themes_1 = require("../../../themes");
|
|
22
21
|
var icons_1 = require("../../../icons");
|
|
23
22
|
var Info = icons_1.icons.Info;
|
|
@@ -39,7 +39,7 @@ var Typo_1 = require("../../../components/Typo");
|
|
|
39
39
|
var contextApi_1 = require("./contextApi");
|
|
40
40
|
var colors_1 = require("../../themes/colors");
|
|
41
41
|
var DisplayIcon_1 = require("../../../utils/comps/DisplayIcon");
|
|
42
|
-
var Buttons_1 = require("
|
|
42
|
+
var Buttons_1 = require("../Buttons");
|
|
43
43
|
var Modal_1 = require("../../../components/Modals/Modal");
|
|
44
44
|
var mixins_1 = require("../../../themes/mixins");
|
|
45
45
|
var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
|
|
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var useScrollBar_1 = require("../../../utils/customHooks/useScrollBar");
|
|
20
|
-
var Buttons_1 = require("
|
|
20
|
+
var Buttons_1 = require("../Buttons");
|
|
21
21
|
var index_styled_1 = require("./index.styled");
|
|
22
22
|
var _EXPORTS_1 = require("../../../utils/_EXPORTS");
|
|
23
23
|
var mixins_1 = require("../../../themes/mixins");
|
|
@@ -48,7 +48,7 @@ var Base = function (_a) {
|
|
|
48
48
|
return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
|
|
49
49
|
react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
|
|
50
50
|
!scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
|
|
51
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, {
|
|
51
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
|
|
52
52
|
react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
|
|
53
53
|
react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX, tabsHasText: tabsHasText, tabBarStyle: tabBarStyle }, options.map(function (op) {
|
|
54
54
|
var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
|
|
@@ -69,7 +69,7 @@ var Base = function (_a) {
|
|
|
69
69
|
tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
|
|
70
70
|
}))),
|
|
71
71
|
!scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
|
|
72
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, {
|
|
72
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
|
|
73
73
|
};
|
|
74
74
|
var TabBarStyle1 = function (props) {
|
|
75
75
|
var _a = props.placeholder, placeholder = _a === void 0 ? 'Select An Option' : _a;
|
package/package.json
CHANGED
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { To } from "react-router-dom";
|
|
3
|
-
export interface DisplayIconProps {
|
|
4
|
-
icon: string;
|
|
5
|
-
size: number;
|
|
6
|
-
color?: string;
|
|
7
|
-
iconWeight?: string;
|
|
8
|
-
}
|
|
9
|
-
export interface ButtonProps {
|
|
10
|
-
id?: string;
|
|
11
|
-
link?: {
|
|
12
|
-
val: To;
|
|
13
|
-
displayText?: string;
|
|
14
|
-
};
|
|
15
|
-
children?: React.ReactNode;
|
|
16
|
-
value?: string;
|
|
17
|
-
submit?: boolean;
|
|
18
|
-
icon?: string;
|
|
19
|
-
iconAfter?: string;
|
|
20
|
-
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
21
|
-
onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
22
|
-
active?: boolean;
|
|
23
|
-
disabled?: boolean;
|
|
24
|
-
invert?: boolean;
|
|
25
|
-
theme?: string;
|
|
26
|
-
width?: string;
|
|
27
|
-
onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
28
|
-
onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
29
|
-
color?: string;
|
|
30
|
-
style?: React.CSSProperties;
|
|
31
|
-
className?: string;
|
|
32
|
-
S?: boolean;
|
|
33
|
-
M?: boolean;
|
|
34
|
-
iconSize?: number | "S" | "M";
|
|
35
|
-
iconColor?: string;
|
|
36
|
-
iconWeight?: string;
|
|
37
|
-
stopPropagation?: boolean;
|
|
38
|
-
preventDefault?: boolean;
|
|
39
|
-
forceHover?: boolean;
|
|
40
|
-
}
|
|
41
|
-
export interface ButtonStyledWrapperProps {
|
|
42
|
-
props: ButtonProps;
|
|
43
|
-
variant?: string;
|
|
44
|
-
}
|
|
45
|
-
export declare const ButtonPrimary: React.FunctionComponent<ButtonProps>;
|
|
46
|
-
export declare const ButtonSecondary: React.FunctionComponent<ButtonProps>;
|
|
47
|
-
export declare const ButtonCustom: React.FunctionComponent<ButtonProps>;
|
|
48
|
-
export declare const ButtonGhost: React.FunctionComponent<ButtonProps>;
|
|
49
|
-
export interface GoogleLoginProps {
|
|
50
|
-
theme?: string;
|
|
51
|
-
S?: boolean;
|
|
52
|
-
disabled?: boolean;
|
|
53
|
-
width?: string;
|
|
54
|
-
className?: string;
|
|
55
|
-
style?: React.CSSProperties;
|
|
56
|
-
value?: string;
|
|
57
|
-
children?: React.ReactNode;
|
|
58
|
-
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Renders a Google login button component.
|
|
62
|
-
*
|
|
63
|
-
* @props - The props for the Google login button component.
|
|
64
|
-
* @prop {string} props.theme - The theme for the button.
|
|
65
|
-
* @prop {string} props.S - The size of the button.
|
|
66
|
-
* @prop {boolean} props.disabled - Whether the button is disabled or not.
|
|
67
|
-
* @prop {string} props.width - The width of the button.
|
|
68
|
-
* @prop {string} props.className - The class name of the button.
|
|
69
|
-
* @prop {React.CSSProperties} props.style - The inline style of the button.
|
|
70
|
-
* @prop {string} props.value - The value of the button.
|
|
71
|
-
* @prop {React.ReactNode} props.children - The children of the button.
|
|
72
|
-
* @prop {Function} props.onClick - The click event handler for the button.
|
|
73
|
-
* @return {React.ReactNode} The rendered Google login button component.
|
|
74
|
-
*/
|
|
75
|
-
export declare const GoogleLogin: React.FunctionComponent<GoogleLoginProps>;
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.GoogleLogin = exports.ButtonGhost = exports.ButtonCustom = exports.ButtonSecondary = exports.ButtonPrimary = void 0;
|
|
18
|
-
var react_1 = __importDefault(require("react"));
|
|
19
|
-
var styled_1 = require("./styled");
|
|
20
|
-
var react_router_dom_1 = require("react-router-dom");
|
|
21
|
-
var lodash_1 = require("lodash");
|
|
22
|
-
var Typo_1 = require("../Typo");
|
|
23
|
-
var icons_1 = require("../../icons");
|
|
24
|
-
var themes_1 = require("../../themes");
|
|
25
|
-
var DisplayIcon = function (_a) {
|
|
26
|
-
var icon = _a.icon, size = _a.size, color = _a.color, iconWeight = _a.iconWeight;
|
|
27
|
-
var IconComp = icons_1.icons[icon];
|
|
28
|
-
return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: iconWeight || 'bold' }));
|
|
29
|
-
};
|
|
30
|
-
var ButtonStyledWrapper = function (_a) {
|
|
31
|
-
var props = _a.props, variant = _a.variant;
|
|
32
|
-
var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className, S = props.S, M = props.M, iconSize = props.iconSize, _iconColor = props.iconColor, iconWeight = props.iconWeight, stopPropagation = props.stopPropagation, preventDefault = props.preventDefault, forceHover = props.forceHover;
|
|
33
|
-
var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
|
|
34
|
-
var debouncedOnClick = onClick && (0, lodash_1.debounce)(onClick, 200);
|
|
35
|
-
var debouncedMouseDown = onMouseDown && (0, lodash_1.debounce)(onMouseDown, 150);
|
|
36
|
-
var composition = (icon || iconAfter) && displayText
|
|
37
|
-
? "icon+text"
|
|
38
|
-
: !displayText
|
|
39
|
-
? "iconOnly"
|
|
40
|
-
: "textOnly";
|
|
41
|
-
var size = ['icon+text', 'textOnly'].indexOf(composition) !== -1
|
|
42
|
-
? (S && 'S') || 'M'
|
|
43
|
-
: (M && 'M') || 'S';
|
|
44
|
-
var calcIconSize = function () {
|
|
45
|
-
var thisSize = iconSize || size;
|
|
46
|
-
return thisSize === 'S' ? 15 : 20;
|
|
47
|
-
};
|
|
48
|
-
var iconColor = !disabled ? _iconColor : themes_1.colors.greyColor40;
|
|
49
|
-
return (react_1.default.createElement(styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: function (e) {
|
|
50
|
-
stopPropagation && e.stopPropagation();
|
|
51
|
-
preventDefault && e.preventDefault();
|
|
52
|
-
debouncedOnClick && debouncedOnClick(e);
|
|
53
|
-
}, onMouseDown: function (e) {
|
|
54
|
-
stopPropagation && e.stopPropagation();
|
|
55
|
-
preventDefault && e.preventDefault();
|
|
56
|
-
debouncedMouseDown && debouncedMouseDown(e);
|
|
57
|
-
}, composition: composition, width: width, color: color, forceHover: forceHover },
|
|
58
|
-
icon && react_1.default.createElement(DisplayIcon, { icon: icon, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' }),
|
|
59
|
-
displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText),
|
|
60
|
-
iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' })));
|
|
61
|
-
};
|
|
62
|
-
/**
|
|
63
|
-
* Generates a Button component based on the provided props and variant.
|
|
64
|
-
*
|
|
65
|
-
* @prop { ButtonProps } props - The properties for the Button component
|
|
66
|
-
* @prop { string } variant - The variant of the Button component
|
|
67
|
-
* @return { ReactNode } The Button component to be rendered
|
|
68
|
-
*/
|
|
69
|
-
var Button = function (_a) {
|
|
70
|
-
var props = _a.props, variant = _a.variant;
|
|
71
|
-
var link = props.link, onClick = props.onClick;
|
|
72
|
-
var buttonAction = link ? function () { return null; } : onClick;
|
|
73
|
-
return link ? (react_1.default.createElement(react_router_dom_1.Link, { to: link.val },
|
|
74
|
-
react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: buttonAction }), variant: variant }))) : (react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: buttonAction }), variant: variant }));
|
|
75
|
-
};
|
|
76
|
-
var ButtonPrimary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "primary" })); };
|
|
77
|
-
exports.ButtonPrimary = ButtonPrimary;
|
|
78
|
-
var ButtonSecondary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "secondary" })); };
|
|
79
|
-
exports.ButtonSecondary = ButtonSecondary;
|
|
80
|
-
var ButtonCustom = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "custom" })); };
|
|
81
|
-
exports.ButtonCustom = ButtonCustom;
|
|
82
|
-
var ButtonGhost = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "ghost" })); };
|
|
83
|
-
exports.ButtonGhost = ButtonGhost;
|
|
84
|
-
/**
|
|
85
|
-
* Renders a Google login button component.
|
|
86
|
-
*
|
|
87
|
-
* @props - The props for the Google login button component.
|
|
88
|
-
* @prop {string} props.theme - The theme for the button.
|
|
89
|
-
* @prop {string} props.S - The size of the button.
|
|
90
|
-
* @prop {boolean} props.disabled - Whether the button is disabled or not.
|
|
91
|
-
* @prop {string} props.width - The width of the button.
|
|
92
|
-
* @prop {string} props.className - The class name of the button.
|
|
93
|
-
* @prop {React.CSSProperties} props.style - The inline style of the button.
|
|
94
|
-
* @prop {string} props.value - The value of the button.
|
|
95
|
-
* @prop {React.ReactNode} props.children - The children of the button.
|
|
96
|
-
* @prop {Function} props.onClick - The click event handler for the button.
|
|
97
|
-
* @return {React.ReactNode} The rendered Google login button component.
|
|
98
|
-
*/
|
|
99
|
-
var GoogleLogin = function (props) {
|
|
100
|
-
var theme = props.theme, S = props.S, disabled = props.disabled, width = props.width, className = props.className, style = props.style, value = props.value, children = props.children, onClick = props.onClick;
|
|
101
|
-
var displayText = value || children || "Sign up with Google";
|
|
102
|
-
var size = (S && "S") || "M";
|
|
103
|
-
return (react_1.default.createElement(styled_1.ButtonStyled, { size: size, disabled: disabled, width: width, onClick: onClick, variant: "googleAuth", theme: theme, style: style, className: className },
|
|
104
|
-
react_1.default.createElement(DisplayIcon, { icon: "OkeGoogleIcon", size: 24 }),
|
|
105
|
-
displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText)));
|
|
106
|
-
};
|
|
107
|
-
exports.GoogleLogin = GoogleLogin;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
export interface HoverStylingProps {
|
|
2
|
-
invert?: boolean;
|
|
3
|
-
active?: boolean;
|
|
4
|
-
theme: {
|
|
5
|
-
colors: any;
|
|
6
|
-
};
|
|
7
|
-
}
|
|
8
|
-
export interface ButtonVariantProps {
|
|
9
|
-
invert?: boolean;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
color?: string;
|
|
12
|
-
forceHover?: boolean;
|
|
13
|
-
theme: {
|
|
14
|
-
colors: string[];
|
|
15
|
-
};
|
|
16
|
-
active?: boolean;
|
|
17
|
-
}
|
|
18
|
-
export interface ButtonGhostProps extends ButtonVariantProps {
|
|
19
|
-
composition?: string;
|
|
20
|
-
}
|
|
21
|
-
export interface GoogleButtonProps {
|
|
22
|
-
disabled?: boolean;
|
|
23
|
-
}
|
|
24
|
-
export interface ButtonStyledProps {
|
|
25
|
-
size: string;
|
|
26
|
-
width?: string;
|
|
27
|
-
variant: string;
|
|
28
|
-
active?: boolean;
|
|
29
|
-
invert?: boolean;
|
|
30
|
-
composition?: string;
|
|
31
|
-
forceHover?: boolean;
|
|
32
|
-
}
|
|
33
|
-
export declare const ButtonStyled: import("styled-components").StyledComponent<"button", any, ButtonStyledProps, never>;
|
|
@@ -1,231 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
-
if (k2 === undefined) k2 = k;
|
|
8
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
-
}
|
|
12
|
-
Object.defineProperty(o, k2, desc);
|
|
13
|
-
}) : (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
o[k2] = m[k];
|
|
16
|
-
}));
|
|
17
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
-
}) : function(o, v) {
|
|
20
|
-
o["default"] = v;
|
|
21
|
-
});
|
|
22
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
23
|
-
var ownKeys = function(o) {
|
|
24
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
25
|
-
var ar = [];
|
|
26
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
27
|
-
return ar;
|
|
28
|
-
};
|
|
29
|
-
return ownKeys(o);
|
|
30
|
-
};
|
|
31
|
-
return function (mod) {
|
|
32
|
-
if (mod && mod.__esModule) return mod;
|
|
33
|
-
var result = {};
|
|
34
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
35
|
-
__setModuleDefault(result, mod);
|
|
36
|
-
return result;
|
|
37
|
-
};
|
|
38
|
-
})();
|
|
39
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
exports.ButtonStyled = void 0;
|
|
41
|
-
var styled_components_1 = __importStar(require("styled-components"));
|
|
42
|
-
var colors_1 = require("../../themes/colors");
|
|
43
|
-
var mixins_1 = require("../../themes/mixins");
|
|
44
|
-
var utilsOolib_1 = require("../../utilsOolib");
|
|
45
|
-
var greyColor100 = colors_1.colors.greyColor100, greyColor90 = colors_1.colors.greyColor90, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, greyColor10 = colors_1.colors.greyColor10, white = colors_1.colors.white, none = colors_1.colors.none;
|
|
46
|
-
//sizes
|
|
47
|
-
var SIZES = {
|
|
48
|
-
S: "3rem",
|
|
49
|
-
M: "4rem",
|
|
50
|
-
};
|
|
51
|
-
var hoverStylingPrimary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n"])), function (_a) {
|
|
52
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
53
|
-
return invert
|
|
54
|
-
? (0, utilsOolib_1.getPrimaryColor10)(colors)
|
|
55
|
-
: (0, utilsOolib_1.getPrimaryColor40)(colors);
|
|
56
|
-
}, function (_a) {
|
|
57
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
58
|
-
return invert
|
|
59
|
-
? greyColor100
|
|
60
|
-
: (0, utilsOolib_1.getPrimaryColorText)(colors);
|
|
61
|
-
});
|
|
62
|
-
var hoverStylingSecondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
63
|
-
var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
|
|
64
|
-
return active
|
|
65
|
-
? ""
|
|
66
|
-
: invert
|
|
67
|
-
? greyColor80
|
|
68
|
-
: (0, utilsOolib_1.getPrimaryColor40)(colors);
|
|
69
|
-
});
|
|
70
|
-
var hoverStylingCustom = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
71
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
72
|
-
return invert
|
|
73
|
-
? greyColor80
|
|
74
|
-
: (0, utilsOolib_1.getPrimaryColor40)(colors);
|
|
75
|
-
});
|
|
76
|
-
var hoverStylingGhost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
77
|
-
var invert = _a.invert, active = _a.active;
|
|
78
|
-
return active
|
|
79
|
-
? ""
|
|
80
|
-
: invert
|
|
81
|
-
? greyColor80
|
|
82
|
-
: greyColor10;
|
|
83
|
-
});
|
|
84
|
-
var ButtonPrimary = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: none;\n background-color: ", ";\n color: ", ";\n ", "\n ", "\n\n ", " \n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"], ["\n border: none;\n background-color: ", ";\n color: ", ";\n ", "\n ", "\n\n ", " \n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"])), function (_a) {
|
|
85
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
86
|
-
return invert
|
|
87
|
-
? (0, utilsOolib_1.getPrimaryColor40)(colors)
|
|
88
|
-
: (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
89
|
-
}, function (_a) {
|
|
90
|
-
var invert = _a.invert;
|
|
91
|
-
return invert ? greyColor100 : white;
|
|
92
|
-
}, function (_a) {
|
|
93
|
-
var color = _a.color;
|
|
94
|
-
return color && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), color);
|
|
95
|
-
}, function (_a) {
|
|
96
|
-
var disabled = _a.disabled;
|
|
97
|
-
return disabled && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n "], ["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n "])), function (_a) {
|
|
98
|
-
var invert = _a.invert;
|
|
99
|
-
return invert ? greyColor70 : greyColor15;
|
|
100
|
-
}, greyColor40);
|
|
101
|
-
}, function (_a) {
|
|
102
|
-
var forceHover = _a.forceHover;
|
|
103
|
-
return forceHover && hoverStylingPrimary;
|
|
104
|
-
}, hoverStylingPrimary);
|
|
105
|
-
var ButtonSecondary = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border: 2px solid\n ", ";\n background-color: ", ";\n\n color: ", "; \n ", "\n ", "\n ", "\n\n ", " \n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"], ["\n border: 2px solid\n ", ";\n background-color: ", ";\n\n color: ", "; \n ", "\n ", "\n ", "\n\n ", " \n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"])), function (_a) {
|
|
106
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
107
|
-
return invert
|
|
108
|
-
? (0, utilsOolib_1.getPrimaryColor40)(colors)
|
|
109
|
-
: (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
110
|
-
}, function (_a) {
|
|
111
|
-
var invert = _a.invert;
|
|
112
|
-
return invert ? greyColor100 : white;
|
|
113
|
-
}, function (_a) {
|
|
114
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
115
|
-
return invert
|
|
116
|
-
? (0, utilsOolib_1.getPrimaryColor40)(colors)
|
|
117
|
-
: (0, utilsOolib_1.getPrimaryColorText)(colors);
|
|
118
|
-
}, function (_a) {
|
|
119
|
-
var color = _a.color;
|
|
120
|
-
return color && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), color);
|
|
121
|
-
}, function (_a) {
|
|
122
|
-
var active = _a.active;
|
|
123
|
-
return active && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), function (_a) {
|
|
124
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
125
|
-
return invert ?
|
|
126
|
-
(0, utilsOolib_1.getPrimaryColor40)(colors)
|
|
127
|
-
:
|
|
128
|
-
(0, utilsOolib_1.getPrimaryColor10)(colors);
|
|
129
|
-
}, function (_a) {
|
|
130
|
-
var colors = _a.theme.colors;
|
|
131
|
-
return (0, utilsOolib_1.getPrimaryColorText)(colors);
|
|
132
|
-
});
|
|
133
|
-
}, function (_a) {
|
|
134
|
-
var disabled = _a.disabled;
|
|
135
|
-
return disabled && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid ", ";\n color: ", "; \n pointer-events: none;\n "], ["\n background-color: ", ";\n border: 2px solid ", ";\n color: ", "; \n pointer-events: none;\n "])), function (_a) {
|
|
136
|
-
var invert = _a.invert;
|
|
137
|
-
return invert ? greyColor80 : white;
|
|
138
|
-
}, greyColor15, greyColor40);
|
|
139
|
-
}, function (_a) {
|
|
140
|
-
var forceHover = _a.forceHover;
|
|
141
|
-
return forceHover && hoverStylingSecondary;
|
|
142
|
-
}, hoverStylingSecondary);
|
|
143
|
-
var ButtonCustom = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border: 2px solid\n ", ";\n box-shadow: -4px 4px 1px\n ", ";\n \n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n ", "\n\n ", " \n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"], ["\n border: 2px solid\n ", ";\n box-shadow: -4px 4px 1px\n ", ";\n \n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n ", "\n\n ", " \n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"])), function (_a) {
|
|
144
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
145
|
-
return invert
|
|
146
|
-
? (0, utilsOolib_1.getPrimaryColor40)(colors)
|
|
147
|
-
: (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
148
|
-
}, function (_a) {
|
|
149
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
150
|
-
return invert
|
|
151
|
-
? (0, utilsOolib_1.getPrimaryColor40)(colors)
|
|
152
|
-
: (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
153
|
-
}, function (_a) {
|
|
154
|
-
var invert = _a.invert;
|
|
155
|
-
return invert ? greyColor100 : white;
|
|
156
|
-
}, function (_a) {
|
|
157
|
-
var invert = _a.invert, colors = _a.theme.colors;
|
|
158
|
-
return invert
|
|
159
|
-
? (0, utilsOolib_1.getPrimaryColor40)(colors)
|
|
160
|
-
: (0, utilsOolib_1.getPrimaryColorText)(colors);
|
|
161
|
-
}, function (_a) {
|
|
162
|
-
var color = _a.color;
|
|
163
|
-
return color && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color);
|
|
164
|
-
}, function (_a) {
|
|
165
|
-
var disabled = _a.disabled;
|
|
166
|
-
return disabled && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n color: ", ";\n border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n box-shadow: -4px 4px 1px ", ";\n pointer-events: none;\n background-color: ", "; \n "], ["\n color: ", ";\n border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n box-shadow: -4px 4px 1px ", ";\n pointer-events: none;\n background-color: ", "; \n "])), greyColor40, function (_a) {
|
|
167
|
-
var invert = _a.invert;
|
|
168
|
-
return (invert ? greyColor40 : greyColor15);
|
|
169
|
-
}, greyColor40, function (_a) {
|
|
170
|
-
var invert = _a.invert;
|
|
171
|
-
return invert ? greyColor80 : white;
|
|
172
|
-
});
|
|
173
|
-
}, function (_a) {
|
|
174
|
-
var forceHover = _a.forceHover;
|
|
175
|
-
return forceHover && hoverStylingCustom;
|
|
176
|
-
}, hoverStylingCustom);
|
|
177
|
-
var ButtonGhost = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n ", "\n ", "\n\n ", "\n \n ", " \n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"], ["\n background-color: ", ";\n color: ", ";\n ", "\n ", "\n\n ", "\n \n ", " \n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"])), function (_a) {
|
|
178
|
-
var active = _a.active, colors = _a.theme.colors;
|
|
179
|
-
return active ? (0, utilsOolib_1.getPrimaryColor40)(colors) : none;
|
|
180
|
-
}, function (_a) {
|
|
181
|
-
var invert = _a.invert, composition = _a.composition, colors = _a.theme.colors;
|
|
182
|
-
return invert
|
|
183
|
-
? (0, utilsOolib_1.getPrimaryColor40)(colors)
|
|
184
|
-
: composition === "iconOnly"
|
|
185
|
-
? greyColor100
|
|
186
|
-
: (0, utilsOolib_1.getPrimaryColorText)(colors);
|
|
187
|
-
}, function (_a) {
|
|
188
|
-
var color = _a.color;
|
|
189
|
-
return color && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), color);
|
|
190
|
-
}, function (_a) {
|
|
191
|
-
var invert = _a.invert;
|
|
192
|
-
return invert && (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), function (_a) {
|
|
193
|
-
var active = _a.active;
|
|
194
|
-
return active ? greyColor80 : greyColor100;
|
|
195
|
-
});
|
|
196
|
-
}, function (_a) {
|
|
197
|
-
var disabled = _a.disabled;
|
|
198
|
-
return disabled && (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n color: ", "; //$greyColor40;\n pointer-events: none;\n "], ["\n color: ", "; //$greyColor40;\n pointer-events: none;\n "])), greyColor40);
|
|
199
|
-
}, function (_a) {
|
|
200
|
-
var forceHover = _a.forceHover;
|
|
201
|
-
return forceHover && hoverStylingGhost;
|
|
202
|
-
}, hoverStylingGhost);
|
|
203
|
-
var GoogleButton = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: #4285f4;\n border: 2px solid #4285f4;\n background-color: ", ";\n ", "\n"], ["\n color: #4285f4;\n border: 2px solid #4285f4;\n background-color: ", ";\n ", "\n"])), white, function (_a) {
|
|
204
|
-
var disabled = _a.disabled;
|
|
205
|
-
return disabled && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
206
|
-
});
|
|
207
|
-
var buttonVariantSetting = {
|
|
208
|
-
primary: ButtonPrimary,
|
|
209
|
-
secondary: ButtonSecondary,
|
|
210
|
-
ghost: ButtonGhost,
|
|
211
|
-
custom: ButtonCustom,
|
|
212
|
-
googleAuth: GoogleButton,
|
|
213
|
-
};
|
|
214
|
-
exports.ButtonStyled = styled_components_1.default.button(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", "\n\n ", "\n\n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n border: none;\n border-radius: 2px;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n border: none;\n border-radius: 2px;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
215
|
-
var composition = _a.composition, size = _a.size;
|
|
216
|
-
switch (composition) {
|
|
217
|
-
case "iconOnly":
|
|
218
|
-
return (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n padding: 0;\n height: ", ";\n width: ", ";\n flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n "], ["\n padding: 0;\n height: ", ";\n width: ", ";\n flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n "])), SIZES[size], SIZES[size]);
|
|
219
|
-
case "icon+text":
|
|
220
|
-
return (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n padding: 0 2rem 0 1.5rem;\n height: ", ";\n "], ["\n padding: 0 2rem 0 1.5rem;\n height: ", ";\n "])), SIZES[size]);
|
|
221
|
-
default:
|
|
222
|
-
return (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n padding: 0 2rem;\n height: ", ";\n "], ["\n padding: 0 2rem;\n height: ", ";\n "])), SIZES[size]);
|
|
223
|
-
}
|
|
224
|
-
}, function (_a) {
|
|
225
|
-
var width = _a.width;
|
|
226
|
-
return width && (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width);
|
|
227
|
-
}, (0, mixins_1.transition)("background-color"), function (_a) {
|
|
228
|
-
var variant = _a.variant;
|
|
229
|
-
return buttonVariantSetting[variant];
|
|
230
|
-
});
|
|
231
|
-
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, templateObject_23, templateObject_24, templateObject_25;
|
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
declare namespace _default {
|
|
2
|
-
let title: string;
|
|
3
|
-
namespace argTypes {
|
|
4
|
-
namespace size {
|
|
5
|
-
let name: string;
|
|
6
|
-
let options: string[];
|
|
7
|
-
namespace mapping {
|
|
8
|
-
let Small: string;
|
|
9
|
-
let Medium: string;
|
|
10
|
-
}
|
|
11
|
-
namespace control {
|
|
12
|
-
let type: string;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
namespace icon {
|
|
16
|
-
let name_1: string;
|
|
17
|
-
export { name_1 as name };
|
|
18
|
-
export { availableIcons as options };
|
|
19
|
-
export namespace control_1 {
|
|
20
|
-
let type_1: string;
|
|
21
|
-
export { type_1 as type };
|
|
22
|
-
}
|
|
23
|
-
export { control_1 as control };
|
|
24
|
-
export let defaultValue: string;
|
|
25
|
-
}
|
|
26
|
-
namespace iconAfter {
|
|
27
|
-
let name_2: string;
|
|
28
|
-
export { name_2 as name };
|
|
29
|
-
export { availableIcons as options };
|
|
30
|
-
export namespace control_2 {
|
|
31
|
-
let type_2: string;
|
|
32
|
-
export { type_2 as type };
|
|
33
|
-
}
|
|
34
|
-
export { control_2 as control };
|
|
35
|
-
}
|
|
36
|
-
namespace iconSize {
|
|
37
|
-
let name_3: string;
|
|
38
|
-
export { name_3 as name };
|
|
39
|
-
let options_1: string[];
|
|
40
|
-
export { options_1 as options };
|
|
41
|
-
export namespace mapping_1 {
|
|
42
|
-
let Small_1: string;
|
|
43
|
-
export { Small_1 as Small };
|
|
44
|
-
let Medium_1: string;
|
|
45
|
-
export { Medium_1 as Medium };
|
|
46
|
-
}
|
|
47
|
-
export { mapping_1 as mapping };
|
|
48
|
-
export namespace control_3 {
|
|
49
|
-
let type_3: string;
|
|
50
|
-
export { type_3 as type };
|
|
51
|
-
}
|
|
52
|
-
export { control_3 as control };
|
|
53
|
-
}
|
|
54
|
-
namespace iconColor {
|
|
55
|
-
let name_4: string;
|
|
56
|
-
export { name_4 as name };
|
|
57
|
-
export { availableColors as options };
|
|
58
|
-
export namespace control_4 {
|
|
59
|
-
let type_4: string;
|
|
60
|
-
export { type_4 as type };
|
|
61
|
-
}
|
|
62
|
-
export { control_4 as control };
|
|
63
|
-
}
|
|
64
|
-
namespace composition {
|
|
65
|
-
let name_5: string;
|
|
66
|
-
export { name_5 as name };
|
|
67
|
-
let options_2: string[];
|
|
68
|
-
export { options_2 as options };
|
|
69
|
-
export namespace control_5 {
|
|
70
|
-
let type_5: string;
|
|
71
|
-
export { type_5 as type };
|
|
72
|
-
}
|
|
73
|
-
export { control_5 as control };
|
|
74
|
-
let defaultValue_1: string;
|
|
75
|
-
export { defaultValue_1 as defaultValue };
|
|
76
|
-
}
|
|
77
|
-
namespace variant {
|
|
78
|
-
let name_6: string;
|
|
79
|
-
export { name_6 as name };
|
|
80
|
-
export namespace control_6 {
|
|
81
|
-
let type_6: string;
|
|
82
|
-
export { type_6 as type };
|
|
83
|
-
}
|
|
84
|
-
export { control_6 as control };
|
|
85
|
-
let options_3: string[];
|
|
86
|
-
export { options_3 as options };
|
|
87
|
-
let defaultValue_2: string;
|
|
88
|
-
export { defaultValue_2 as defaultValue };
|
|
89
|
-
}
|
|
90
|
-
namespace children {
|
|
91
|
-
let name_7: string;
|
|
92
|
-
export { name_7 as name };
|
|
93
|
-
}
|
|
94
|
-
namespace invert {
|
|
95
|
-
let name_8: string;
|
|
96
|
-
export { name_8 as name };
|
|
97
|
-
}
|
|
98
|
-
namespace disabled {
|
|
99
|
-
let name_9: string;
|
|
100
|
-
export { name_9 as name };
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
namespace args {
|
|
104
|
-
let size_1: string;
|
|
105
|
-
export { size_1 as size };
|
|
106
|
-
let variant_1: string;
|
|
107
|
-
export { variant_1 as variant };
|
|
108
|
-
let composition_1: string;
|
|
109
|
-
export { composition_1 as composition };
|
|
110
|
-
let children_1: string;
|
|
111
|
-
export { children_1 as children };
|
|
112
|
-
let icon_1: string;
|
|
113
|
-
export { icon_1 as icon };
|
|
114
|
-
let iconAfter_1: any;
|
|
115
|
-
export { iconAfter_1 as iconAfter };
|
|
116
|
-
let iconSize_1: string;
|
|
117
|
-
export { iconSize_1 as iconSize };
|
|
118
|
-
let iconColor_1: any;
|
|
119
|
-
export { iconColor_1 as iconColor };
|
|
120
|
-
let disabled_1: boolean;
|
|
121
|
-
export { disabled_1 as disabled };
|
|
122
|
-
let invert_1: boolean;
|
|
123
|
-
export { invert_1 as invert };
|
|
124
|
-
}
|
|
125
|
-
namespace parameters {
|
|
126
|
-
namespace docs {
|
|
127
|
-
export { ButtonDocs as page };
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
export default _default;
|
|
132
|
-
export function Button_Primary(args: any): React.JSX.Element;
|
|
133
|
-
export namespace Button_Primary {
|
|
134
|
-
export namespace parameters_1 {
|
|
135
|
-
namespace controls {
|
|
136
|
-
let exclude: string[];
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
export { parameters_1 as parameters };
|
|
140
|
-
}
|
|
141
|
-
export function Button_Secondary(args: any): React.JSX.Element;
|
|
142
|
-
export namespace Button_Secondary {
|
|
143
|
-
export namespace parameters_2 {
|
|
144
|
-
export namespace controls_1 {
|
|
145
|
-
let exclude_1: string[];
|
|
146
|
-
export { exclude_1 as exclude };
|
|
147
|
-
}
|
|
148
|
-
export { controls_1 as controls };
|
|
149
|
-
}
|
|
150
|
-
export { parameters_2 as parameters };
|
|
151
|
-
export namespace args_1 {
|
|
152
|
-
let active: boolean;
|
|
153
|
-
}
|
|
154
|
-
export { args_1 as args };
|
|
155
|
-
}
|
|
156
|
-
export function Button_Ghost(args: any): React.JSX.Element;
|
|
157
|
-
export namespace Button_Ghost {
|
|
158
|
-
export namespace args_2 {
|
|
159
|
-
let active_1: boolean;
|
|
160
|
-
export { active_1 as active };
|
|
161
|
-
}
|
|
162
|
-
export { args_2 as args };
|
|
163
|
-
export namespace parameters_3 {
|
|
164
|
-
export namespace controls_2 {
|
|
165
|
-
let exclude_2: string[];
|
|
166
|
-
export { exclude_2 as exclude };
|
|
167
|
-
}
|
|
168
|
-
export { controls_2 as controls };
|
|
169
|
-
}
|
|
170
|
-
export { parameters_3 as parameters };
|
|
171
|
-
}
|
|
172
|
-
export function Button_Custom(args: any): React.JSX.Element;
|
|
173
|
-
export namespace Button_Custom {
|
|
174
|
-
export namespace parameters_4 {
|
|
175
|
-
export namespace controls_3 {
|
|
176
|
-
let exclude_3: string[];
|
|
177
|
-
export { exclude_3 as exclude };
|
|
178
|
-
}
|
|
179
|
-
export { controls_3 as controls };
|
|
180
|
-
}
|
|
181
|
-
export { parameters_4 as parameters };
|
|
182
|
-
}
|
|
183
|
-
export function Google_Login(args: any): React.JSX.Element;
|
|
184
|
-
export namespace Google_Login {
|
|
185
|
-
export namespace parameters_5 {
|
|
186
|
-
export namespace controls_4 {
|
|
187
|
-
let exclude_4: string[];
|
|
188
|
-
export { exclude_4 as exclude };
|
|
189
|
-
}
|
|
190
|
-
export { controls_4 as controls };
|
|
191
|
-
}
|
|
192
|
-
export { parameters_5 as parameters };
|
|
193
|
-
}
|
|
194
|
-
declare const availableIcons: string[];
|
|
195
|
-
declare const availableColors: string[];
|
|
196
|
-
import ButtonDocs from "./Buttons.mdx";
|
|
197
|
-
import React from "react";
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
14
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
15
|
-
if (ar || !(i in from)) {
|
|
16
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
17
|
-
ar[i] = from[i];
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
21
|
-
};
|
|
22
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
23
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.Google_Login = exports.Button_Custom = exports.Button_Ghost = exports.Button_Secondary = exports.Button_Primary = void 0;
|
|
27
|
-
var react_1 = __importDefault(require("react"));
|
|
28
|
-
var Buttons_1 = require("../../../components/Buttons");
|
|
29
|
-
var Buttons_mdx_1 = __importDefault(require("./Buttons.mdx"));
|
|
30
|
-
var icons_1 = require("../../../icons");
|
|
31
|
-
var themes_1 = require("../../../themes");
|
|
32
|
-
var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
|
|
33
|
-
var availableColors = __spreadArray([undefined], Object.keys(themes_1.colors).sort(), true);
|
|
34
|
-
exports.default = {
|
|
35
|
-
title: "Components/Buttons",
|
|
36
|
-
argTypes: {
|
|
37
|
-
size: {
|
|
38
|
-
name: "Button Size",
|
|
39
|
-
options: ["Small", "Medium"],
|
|
40
|
-
mapping: {
|
|
41
|
-
Small: "S",
|
|
42
|
-
Medium: "M",
|
|
43
|
-
},
|
|
44
|
-
control: { type: "inline-radio" },
|
|
45
|
-
},
|
|
46
|
-
icon: {
|
|
47
|
-
name: "Icon Before",
|
|
48
|
-
options: availableIcons,
|
|
49
|
-
control: { type: "select" },
|
|
50
|
-
defaultValue: "PencilSimple",
|
|
51
|
-
},
|
|
52
|
-
iconAfter: {
|
|
53
|
-
name: "Icon After",
|
|
54
|
-
options: availableIcons,
|
|
55
|
-
control: { type: "select" },
|
|
56
|
-
},
|
|
57
|
-
iconSize: {
|
|
58
|
-
name: "Icon Size",
|
|
59
|
-
options: ["Small", "Medium"],
|
|
60
|
-
mapping: {
|
|
61
|
-
Small: "S",
|
|
62
|
-
Medium: "M",
|
|
63
|
-
},
|
|
64
|
-
control: { type: "inline-radio" },
|
|
65
|
-
},
|
|
66
|
-
iconColor: {
|
|
67
|
-
name: "Icon Color",
|
|
68
|
-
options: availableColors,
|
|
69
|
-
control: { type: "select" },
|
|
70
|
-
},
|
|
71
|
-
composition: {
|
|
72
|
-
name: "Button Compostion",
|
|
73
|
-
options: ["Default", "Text-only", "Icon-only"],
|
|
74
|
-
control: { type: "select" },
|
|
75
|
-
defaultValue: "Default",
|
|
76
|
-
},
|
|
77
|
-
variant: {
|
|
78
|
-
name: "Button Type",
|
|
79
|
-
control: { type: "select" },
|
|
80
|
-
options: ["secondary", "primary", "ghost", "custom"],
|
|
81
|
-
defaultValue: "secondary",
|
|
82
|
-
},
|
|
83
|
-
children: {
|
|
84
|
-
name: "Text",
|
|
85
|
-
},
|
|
86
|
-
invert: {
|
|
87
|
-
name: "Invert",
|
|
88
|
-
},
|
|
89
|
-
disabled: {
|
|
90
|
-
name: "Disabled",
|
|
91
|
-
},
|
|
92
|
-
},
|
|
93
|
-
args: {
|
|
94
|
-
size: "Small",
|
|
95
|
-
variant: "secondary",
|
|
96
|
-
composition: "Default",
|
|
97
|
-
children: "Text",
|
|
98
|
-
icon: "PencilSimple",
|
|
99
|
-
iconAfter: undefined,
|
|
100
|
-
iconSize: "Small",
|
|
101
|
-
iconColor: undefined,
|
|
102
|
-
disabled: false,
|
|
103
|
-
invert: false,
|
|
104
|
-
},
|
|
105
|
-
parameters: {
|
|
106
|
-
docs: {
|
|
107
|
-
page: Buttons_mdx_1.default,
|
|
108
|
-
},
|
|
109
|
-
},
|
|
110
|
-
};
|
|
111
|
-
var GenButtonStory = function (_a) {
|
|
112
|
-
var args = _a.args, Comp = _a.Comp;
|
|
113
|
-
console.log(args.composition);
|
|
114
|
-
args[args["size"]] = true;
|
|
115
|
-
args[args["state"]] = true;
|
|
116
|
-
args.iconColor = themes_1.colors[args.iconColor];
|
|
117
|
-
args["onClick"] = function () { return console.log("clicked"); };
|
|
118
|
-
if (args.composition === "Text-only") {
|
|
119
|
-
delete args.icon;
|
|
120
|
-
delete args.iconAfter;
|
|
121
|
-
}
|
|
122
|
-
if (args.composition === "Icon-only") {
|
|
123
|
-
delete args["children"];
|
|
124
|
-
}
|
|
125
|
-
args["theme"] = {
|
|
126
|
-
colors: {
|
|
127
|
-
primaryColor40: "#addbff",
|
|
128
|
-
primaryColor100: "#33a4ff",
|
|
129
|
-
primaryColor10: "#EBF6FF",
|
|
130
|
-
primaryColorText: "#0071CC",
|
|
131
|
-
},
|
|
132
|
-
};
|
|
133
|
-
return (react_1.default.createElement("div", { style: {
|
|
134
|
-
backgroundColor: args.invert ? "#383838" : "",
|
|
135
|
-
padding: "20px",
|
|
136
|
-
} },
|
|
137
|
-
react_1.default.createElement(Comp, __assign({}, args))));
|
|
138
|
-
};
|
|
139
|
-
var Button_Primary = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonPrimary })); };
|
|
140
|
-
exports.Button_Primary = Button_Primary;
|
|
141
|
-
exports.Button_Primary.parameters = { controls: { exclude: ["variant", "color"] } };
|
|
142
|
-
var Button_Secondary = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonSecondary })); };
|
|
143
|
-
exports.Button_Secondary = Button_Secondary;
|
|
144
|
-
exports.Button_Secondary.parameters = { controls: { exclude: ["variant", "color"] } };
|
|
145
|
-
exports.Button_Secondary.args = {
|
|
146
|
-
active: false,
|
|
147
|
-
};
|
|
148
|
-
var Button_Ghost = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonGhost })); };
|
|
149
|
-
exports.Button_Ghost = Button_Ghost;
|
|
150
|
-
exports.Button_Ghost.args = {
|
|
151
|
-
active: false,
|
|
152
|
-
};
|
|
153
|
-
exports.Button_Ghost.parameters = { controls: { exclude: ["variant"] } };
|
|
154
|
-
var Button_Custom = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonCustom })); };
|
|
155
|
-
exports.Button_Custom = Button_Custom;
|
|
156
|
-
exports.Button_Custom.parameters = { controls: { exclude: ["variant", "color"] } };
|
|
157
|
-
var Google_Login = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.GoogleLogin })); };
|
|
158
|
-
exports.Google_Login = Google_Login;
|
|
159
|
-
exports.Google_Login.parameters = {
|
|
160
|
-
controls: { exclude: ["variant", "color", "iconOnly", "icon + text"] },
|
|
161
|
-
};
|