krl-alfred 1.71.0 → 1.71.2
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/Checkbox/Checkbox.js +1 -1
- package/dist/components/Input/Input.styled.js +1 -1
- package/dist/components/Input/stories/Input.stories.js +1 -0
- package/dist/components/ListGroup/ListGroup.js +8 -1
- package/dist/components/RadioButton/layouts/basic/Basic.styled.js +1 -1
- package/dist/components/SelectBox/SelectBox.js +4 -3
- package/dist/components/SelectBox/SelectBox.styled.js +1 -1
- package/dist/components/SelectBox/stories/SelectBox.stories.js +1 -0
- package/dist/components/TextLink/TextLink.js +1 -0
- package/dist/components/TextLink/TextLink.styled.js +1 -1
- package/dist/components/TextLink/props.js +2 -1
- package/dist/components/TextLink/stories/TextLink.stories.js +4 -1
- package/dist/components/Toast/Toast.js +4 -8
- package/dist/components/Tooltip/Tooltip.styled.js +10 -10
- package/dist/components/Tooltip/stories/Tooltip.stories.js +2 -0
- package/dist/utils/svgToBase64.js +15 -1
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
10
10
|
var Checkbox = function (props) {
|
|
11
11
|
var _a, _b, _c;
|
|
12
12
|
var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid;
|
|
13
|
-
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-13-16"] = size === "medium", _b), (_c = {}, _c["body-semi-bold-14-17"] = size === "large", _c)), htmlFor: id, children: label })), description && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("description", "body-regular-13-16"), htmlFor: id, children: description }))] }))] }));
|
|
14
14
|
};
|
|
15
15
|
exports.default = Checkbox;
|
|
16
16
|
Checkbox.propTypes = {
|
|
@@ -11,5 +11,5 @@ exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n"])));
|
|
13
13
|
exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"])), function (props) { return props.width || '370px'; });
|
|
14
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n"])), function (props) { return props.hasError ? 'white' : 'var(--dark-opacity-3)'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
14
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.hasError ? 'white' : 'var(--dark-opacity-3)'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
var react_1 = require("react");
|
|
4
5
|
var ListGroup_styled_1 = require("./ListGroup.styled");
|
|
5
6
|
var ListGroup = function (props) {
|
|
6
7
|
var data = props.data;
|
|
8
|
+
var _a = (0, react_1.useState)(''), link = _a[0], setLink = _a[1];
|
|
9
|
+
(0, react_1.useEffect)(function () {
|
|
10
|
+
var _a;
|
|
11
|
+
setLink((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href);
|
|
12
|
+
}, []);
|
|
7
13
|
return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
|
|
8
|
-
|
|
14
|
+
var _a;
|
|
15
|
+
return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, { isActive: (_a = link === null || link === void 0 ? void 0 : link.split('/')) === null || _a === void 0 ? void 0 : _a.includes(item["slug"]), onClick: item.onClick, className: "title-bold-16-19", children: item.title }) }, key);
|
|
9
16
|
}) }));
|
|
10
17
|
};
|
|
11
18
|
ListGroup.defaultProps = {};
|
|
@@ -12,7 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
|
|
15
|
-
exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
15
|
+
exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n\n label.label {\n display: block;\n }\n\n label.description {\n display: block;\n margin: 0;\n }\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n\n label.label {\n display: block;\n }\n\n label.description {\n display: block;\n margin: 0;\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
|
|
16
16
|
switch (props.size) {
|
|
17
17
|
case 'small':
|
|
18
18
|
return "16px";
|
|
@@ -19,17 +19,18 @@ var SelectBox_styled_1 = require("./SelectBox.styled");
|
|
|
19
19
|
var classnames_1 = __importDefault(require("classnames"));
|
|
20
20
|
var react_select_1 = __importDefault(require("react-select"));
|
|
21
21
|
var SelectBox = function (props) {
|
|
22
|
-
var _a;
|
|
23
|
-
var options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId;
|
|
22
|
+
var _a, _b;
|
|
23
|
+
var options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg;
|
|
24
24
|
var formatOptionLabel = function (_a) {
|
|
25
25
|
var _b;
|
|
26
26
|
var innerProps = _a.innerProps, isDisabled = _a.isDisabled, data = _a.data;
|
|
27
27
|
return ((0, jsx_runtime_1.jsx)("div", __assign({}, innerProps, { className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b)), children: (0, jsx_runtime_1.jsxs)("div", { children: [data.label && (0, jsx_runtime_1.jsx)("strong", { className: "title-bold-16-19", children: data.label }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { className: "body-medium-13-16", children: data.labelBottom })] }) })));
|
|
28
28
|
};
|
|
29
|
-
return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("top caption-bold-12-15"), children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)("div", { className: "select", children: (0, jsx_runtime_1.jsx)(react_select_1.default, { components: { Option: formatOptionLabel }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable, _a)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }) })] }));
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("top caption-bold-12-15"), children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)("div", { className: "select", children: (0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props)) })] }));
|
|
30
30
|
};
|
|
31
31
|
SelectBox.defaultValues = {
|
|
32
32
|
hasError: false,
|
|
33
|
+
lightBg: true,
|
|
33
34
|
label: "Label",
|
|
34
35
|
width: "370px",
|
|
35
36
|
placeholder: "İstediğiniz tarihi seçin...",
|
|
@@ -12,5 +12,5 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
|
|
15
|
-
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n .customSelect__control {\n height: 56px;\n background-color:
|
|
15
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n border-color: var(--dark-opacity-10);\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: var(--dark-opacity-50);\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: var(--dark);\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: 200px;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n\n &:hover {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: 51px;\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n transform: rotate(180deg);\n }\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n border-color: var(--dark-opacity-10);\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: var(--dark-opacity-50);\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: var(--dark);\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: 200px;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n\n &:hover {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: 51px;\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n transform: rotate(180deg);\n }\n }\n }\n }\n"])), function (props) { return props.width || '370px'; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
|
|
16
16
|
var templateObject_1;
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.Inner = exports.IconStyled = exports.TextLinkStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color:
|
|
12
|
+
exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n display: inline-block;\n text-decoration: none;\n cursor: pointer;\n svg{\n display: block;\n path, rect{\n stroke : ", ";\n }\n circle{\n fill : ", ";\n ~ path{\n stroke : white;\n }\n }\n }\n &:hover , :focus , :active {\n color: ", ";\n svg{\n display: block;\n path, rect{\n stroke : ", ";\n }\n circle{\n fill : ", ";\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n color: ", ";\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n display: inline-block;\n text-decoration: none;\n cursor: pointer;\n svg{\n display: block;\n path, rect{\n stroke : ", ";\n }\n circle{\n fill : ", ";\n ~ path{\n stroke : white;\n }\n }\n }\n &:hover , :focus , :active {\n color: ", ";\n svg{\n display: block;\n path, rect{\n stroke : ", ";\n }\n circle{\n fill : ", ";\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; });
|
|
13
13
|
exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-right: 0.5rem;\n"], ["\n margin-right: 0.5rem;\n"])));
|
|
14
14
|
exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.iconNames = void 0;
|
|
3
|
+
exports.iconNames = exports.variants = void 0;
|
|
4
4
|
var Icon_1 = require("../Icon");
|
|
5
|
+
exports.variants = ['primary', 'secondary'];
|
|
5
6
|
exports.iconNames = Object.keys(Icon_1.iconList);
|
|
@@ -6,16 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.Default = void 0;
|
|
7
7
|
var TextLink_1 = __importDefault(require("../TextLink"));
|
|
8
8
|
var Icon_1 = require("../../Icon");
|
|
9
|
+
var props_1 = require("../props");
|
|
9
10
|
exports.default = {
|
|
10
11
|
title: 'Components/TextLink',
|
|
11
12
|
component: TextLink_1.default,
|
|
12
13
|
tags: ['autodocs'],
|
|
13
14
|
argTypes: {
|
|
15
|
+
variant: { control: 'select', options: props_1.variants },
|
|
14
16
|
icon: { control: 'select', options: Object.keys(Icon_1.iconList) },
|
|
15
17
|
}
|
|
16
18
|
};
|
|
17
19
|
exports.Default = {
|
|
18
20
|
args: {
|
|
19
|
-
children: "Text Link"
|
|
21
|
+
children: "Text Link",
|
|
22
|
+
variant: "primary",
|
|
20
23
|
},
|
|
21
24
|
};
|
|
@@ -33,16 +33,12 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
|
33
33
|
var Button_1 = __importDefault(require("../Button"));
|
|
34
34
|
var classnames_1 = __importDefault(require("classnames"));
|
|
35
35
|
var Toast = function (props) {
|
|
36
|
-
var timer = props.timer, primaryButtonText = props.primaryButtonText, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isPrimaryButtonLoading = props.isPrimaryButtonLoading, showPrimaryButton = props.showPrimaryButton, children = props.children, icon = props.icon, show = props.show, onPrimaryAction = props.onPrimaryAction, title = props.title, other = __rest(props, ["timer", "primaryButtonText", "isPrimaryButtonDisabled", "isPrimaryButtonLoading", "showPrimaryButton", "children", "icon", "show", "onPrimaryAction", "title"]);
|
|
37
|
-
var _a = (0, react_1.useState)(show), showToast = _a[0], setShowToast = _a[1];
|
|
36
|
+
var timer = props.timer, primaryButtonText = props.primaryButtonText, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isPrimaryButtonLoading = props.isPrimaryButtonLoading, showPrimaryButton = props.showPrimaryButton, children = props.children, icon = props.icon, show = props.show, setShow = props.setShow, onPrimaryAction = props.onPrimaryAction, title = props.title, other = __rest(props, ["timer", "primaryButtonText", "isPrimaryButtonDisabled", "isPrimaryButtonLoading", "showPrimaryButton", "children", "icon", "show", "setShow", "onPrimaryAction", "title"]);
|
|
38
37
|
(0, react_1.useEffect)(function () {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
setShowToast(false);
|
|
42
|
-
}, timer);
|
|
43
|
-
document.body.style.overflow = show ? "auto" : "hidden";
|
|
38
|
+
setTimeout(function () { return setShow(false); }, timer);
|
|
39
|
+
document.body.style.overflow = show ? "hidden" : "auto";
|
|
44
40
|
}, [show]);
|
|
45
|
-
return (
|
|
41
|
+
return (show &&
|
|
46
42
|
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", { children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "24px", height: "24px" }) })), title && ((0, jsx_runtime_1.jsx)("h5", { className: (0, classnames_1.default)("title", "title-extra-bold-16-19"), children: title })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("content", "body-regular-14-17"), children: children }), showPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { className: "bottom", children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", width: "100%", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, children: primaryButtonText }) }))] }) })) }), document.body));
|
|
47
43
|
};
|
|
48
44
|
Toast.defaultProps = {
|
|
@@ -13,37 +13,37 @@ var devices_1 = require("../../constants/devices");
|
|
|
13
13
|
exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"], ["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"])), function (props) { return !props.hasClickAction && "\n &:hover {\n > div {\n opacity: 1;\n }\n }\n "; });
|
|
14
14
|
exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"], ["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; });
|
|
15
15
|
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n margin-bottom: 0.5rem;\n"], ["\n display: block;\n margin-bottom: 0.5rem;\n"])));
|
|
16
|
-
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.
|
|
16
|
+
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.2rem;\n padding: 0.5rem;\n &:before {\n left: auto !important;\n transform: rotate(45deg) !important;\n right: ", " !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n"], ["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.2rem;\n padding: 0.5rem;\n &:before {\n left: auto !important;\n transform: rotate(45deg) !important;\n right: ", " !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
|
|
17
17
|
switch (props.position) {
|
|
18
18
|
case 'bottomRight':
|
|
19
|
-
return "\n right: -
|
|
19
|
+
return "\n right: -20px;\n top: calc(100% + 10px);\n ";
|
|
20
20
|
case 'bottomCenter':
|
|
21
21
|
return "\n left: 50%;\n top: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
22
22
|
case 'bottomLeft':
|
|
23
|
-
return "\n left: -
|
|
23
|
+
return "\n left: -20px;\n top: calc(100% + 10px);\n ";
|
|
24
24
|
case 'topRight':
|
|
25
|
-
return "\n right: -
|
|
25
|
+
return "\n right: -20px;\n bottom: calc(100% + 10px);\n ";
|
|
26
26
|
case 'topCenter':
|
|
27
27
|
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
28
28
|
case 'topLeft':
|
|
29
|
-
return "\n left: -
|
|
29
|
+
return "\n left: -20px;\n bottom: calc(100% + 10px);\n ";
|
|
30
30
|
default:
|
|
31
31
|
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
32
32
|
}
|
|
33
|
-
}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) { return props.iconWidth === "16px" ? "
|
|
33
|
+
}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) { return props.iconWidth === "16px" ? "22px" : "25px"; }, function (props) {
|
|
34
34
|
switch (props.position) {
|
|
35
35
|
case 'bottomRight':
|
|
36
|
-
return "\n bottom: calc(100% - 7px);\n right: ".concat(props.iconWidth === "16px" ? "
|
|
36
|
+
return "\n bottom: calc(100% - 7px);\n right: ".concat(props.iconWidth === "16px" ? "22px" : "27px", ";\n transform: rotate(45deg);\n ");
|
|
37
37
|
case 'bottomCenter':
|
|
38
38
|
return "\n bottom: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
39
39
|
case 'bottomLeft':
|
|
40
|
-
return "\n bottom: calc(100% - 7px);\n left: ".concat(props.iconWidth === "16px" ? "
|
|
40
|
+
return "\n bottom: calc(100% - 7px);\n left: ".concat(props.iconWidth === "16px" ? "22px" : "27px", ";\n transform: rotate(45deg);\n ");
|
|
41
41
|
case 'topRight':
|
|
42
|
-
return "\n top: calc(100% - 7px);\n right: ".concat(props.iconWidth === "16px" ? "
|
|
42
|
+
return "\n top: calc(100% - 7px);\n right: ".concat(props.iconWidth === "16px" ? "22px" : "27px", ";\n transform: rotate(45deg);\n ");
|
|
43
43
|
case 'topCenter':
|
|
44
44
|
return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
45
45
|
case 'topLeft':
|
|
46
|
-
return "\n top: calc(100% - 7px);\n left: ".concat(props.iconWidth === "16px" ? "
|
|
46
|
+
return "\n top: calc(100% - 7px);\n left: ".concat(props.iconWidth === "16px" ? "22px" : "27px", ";\n transform: rotate(45deg);\n ");
|
|
47
47
|
default:
|
|
48
48
|
return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
49
49
|
}
|
|
@@ -4,4 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
var server_1 = __importDefault(require("react-dom/server"));
|
|
7
|
-
exports.default = (function (svg) {
|
|
7
|
+
exports.default = (function (svg) {
|
|
8
|
+
//return `data:image/svg+xml;base64,${typeof window !== "undefined" && window.btoa(ReactDomServer.renderToString(svg))}`
|
|
9
|
+
var xmlSource = server_1.default.renderToString(svg);
|
|
10
|
+
if (!xmlSource.match(/^<svg[^>]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)) {
|
|
11
|
+
xmlSource = xmlSource.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
|
|
12
|
+
}
|
|
13
|
+
if (!xmlSource.match(/^<svg[^>]+"http:\/\/www\.w3\.org\/1999\/xlink"/)) {
|
|
14
|
+
xmlSource = xmlSource.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
|
|
15
|
+
}
|
|
16
|
+
xmlSource = "<?xml version=\"1.0\" standalone=\"no\"?>\r\n".concat(xmlSource);
|
|
17
|
+
var svg64 = encodeURIComponent(xmlSource);
|
|
18
|
+
var b64Start = 'data:image/svg+xml;charset=utf-8,';
|
|
19
|
+
var image64 = b64Start + svg64;
|
|
20
|
+
return image64;
|
|
21
|
+
});
|