krl-alfred 1.76.43 → 1.76.44
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/CouponCode/CouponCode.js +1 -1
- package/dist/components/RadioButton/layouts/basic/Basic.js +2 -2
- package/dist/components/RadioButton/layouts/basic/Basic.styled.js +5 -5
- package/dist/components/RadioButton/props.js +1 -0
- package/dist/components/Stepper/Stepper.js +4 -4
- package/dist/components/Stepper/Stepper.styled.js +2 -2
- package/package.json +1 -1
|
@@ -41,7 +41,7 @@ var CouponCode = function (props) {
|
|
|
41
41
|
setIsExpanded(expanded);
|
|
42
42
|
}, [expanded]);
|
|
43
43
|
var toggleExpand = function () { return setIsExpanded(function (prevState) { return !prevState; }); };
|
|
44
|
-
return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({ "$expanded":
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({ "$expanded": isExpanded }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown", width: "24px", height: "24px" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: props.placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant }, { children: props.buttonText }))] }))] })));
|
|
45
45
|
};
|
|
46
46
|
CouponCode.defaultProps = {
|
|
47
47
|
title: "Title",
|
|
@@ -18,8 +18,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var prop_types_1 = __importDefault(require("prop-types"));
|
|
19
19
|
var Basic_styled_1 = require("./Basic.styled");
|
|
20
20
|
var Basic = function (props) {
|
|
21
|
-
var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, labelOffset = props.labelOffset, hasNoneClick = props.hasNoneClick;
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid,
|
|
21
|
+
var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, labelOffset = props.labelOffset, hasNoneClick = props.hasNoneClick, isWrapText = props.isWrapText;
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$hasNoneClick": hasNoneClick, "$isWrapText": isWrapText }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description })))] })))] })));
|
|
23
23
|
};
|
|
24
24
|
exports.default = Basic;
|
|
25
25
|
Basic.propTypes = {
|
|
@@ -12,8 +12,8 @@ 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 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 flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\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 cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\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 flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\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 cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\n }\n }\n"])), function (props) { return props
|
|
16
|
-
switch (props
|
|
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 flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\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 cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\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 flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\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 cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\n }\n }\n"])), function (props) { return props.$hasNoneClick && "\n user-select:none;\n pointer-events:none;\n "; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementChecked" })), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
|
|
16
|
+
switch (props.$size) {
|
|
17
17
|
case 'xsmall':
|
|
18
18
|
return "16px";
|
|
19
19
|
case 'small':
|
|
@@ -24,7 +24,7 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
|
|
|
24
24
|
return "16px";
|
|
25
25
|
}
|
|
26
26
|
}, function (props) {
|
|
27
|
-
switch (props
|
|
27
|
+
switch (props.$size) {
|
|
28
28
|
case 'xsmall':
|
|
29
29
|
return "16px";
|
|
30
30
|
case 'small':
|
|
@@ -34,8 +34,8 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
|
|
|
34
34
|
default:
|
|
35
35
|
return "16px";
|
|
36
36
|
}
|
|
37
|
-
}, function (props) { return (props
|
|
38
|
-
switch (props
|
|
37
|
+
}, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? '#000000' : 'var(--red)'; }, function (props) { return !props.$isWrapText && "\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n "; }, function (props) {
|
|
38
|
+
switch (props.$size) {
|
|
39
39
|
case 'xsmall':
|
|
40
40
|
return "var(--body-medium-14-17)";
|
|
41
41
|
case 'small':
|
|
@@ -31,13 +31,13 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
|
31
31
|
var classnames_1 = __importDefault(require("classnames"));
|
|
32
32
|
var Stepper = function (props) {
|
|
33
33
|
var steps = props.steps, etc = __rest(props, ["steps"]);
|
|
34
|
-
return (0, jsx_runtime_1.jsx)(Stepper_styled_1.StepperStyled,
|
|
34
|
+
return (0, jsx_runtime_1.jsx)(Stepper_styled_1.StepperStyled, { children: props.steps && props.steps.map(function (step) {
|
|
35
35
|
var _a;
|
|
36
|
-
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Stepper_styled_1.StepStyled, __assign({ activeStep: props.activeStep, index: step.index, onClick: function () { return props.hasClickAction && props.activeStep > step.index && props.setStep(props.activeStep - 1); }, hasClickAction: props.hasClickAction && step.index < props.activeStep, className: (0, classnames_1.default)((_a = {},
|
|
36
|
+
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Stepper_styled_1.StepStyled, __assign({ "$activeStep": props.activeStep, "$index": step.index, onClick: function () { return props.hasClickAction && props.activeStep > step.index && props.setStep(props.activeStep - 1); }, "$hasClickAction": props.hasClickAction && step.index < props.activeStep, className: (0, classnames_1.default)((_a = {},
|
|
37
37
|
_a["done"] = props.activeStep > step.index,
|
|
38
38
|
_a["active"] = props.activeStep === step.index,
|
|
39
|
-
_a)) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "circle" }, { children: (props.activeStep > step.index || props.activeStep === props.steps.length) ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckMark" }) : step.index })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: step.text }))] })), step.index !== steps.length && (0, jsx_runtime_1.jsx)(Stepper_styled_1.DividerStyled, { activeStep: props.activeStep, index: step.index })] });
|
|
40
|
-
}) })
|
|
39
|
+
_a)) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "circle" }, { children: (props.activeStep > step.index || props.activeStep === props.steps.length) ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckMark" }) : step.index })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: step.text }))] })), step.index !== steps.length && (0, jsx_runtime_1.jsx)(Stepper_styled_1.DividerStyled, { "$activeStep": props.activeStep, "$index": step.index })] });
|
|
40
|
+
}) });
|
|
41
41
|
};
|
|
42
42
|
Stepper.defaultProps = {
|
|
43
43
|
steps: [],
|
|
@@ -11,6 +11,6 @@ exports.StepStyled = exports.DividerStyled = exports.StepperStyled = void 0;
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.StepperStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
14
|
-
exports.DividerStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 112px;\n height: 1px;\n background: ", ";\n margin: 0 24px;\n @media only screen and ", " {\n width: 25px;\n }\n"], ["\n width: 112px;\n height: 1px;\n background: ", ";\n margin: 0 24px;\n @media only screen and ", " {\n width: 25px;\n }\n"])), function (props) { return props
|
|
15
|
-
exports.StepStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: ", ";\n div.circle {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n color: ", ";\n font : var(--headline-extra-bold-24-29);\n @media only screen and ", " {\n width: 40px;\n height: 40px;\n }\n\n svg {\n path {\n fill: white;\n }\n }\n\n }\n\n div.text {\n color: ", ";\n margin-left: 16px;\n font : var(--headline-semi-bold-24-29);\n @media only screen and ", " {\n display: ", ";\n }\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: ", ";\n div.circle {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n color: ", ";\n font : var(--headline-extra-bold-24-29);\n @media only screen and ", " {\n width: 40px;\n height: 40px;\n }\n\n svg {\n path {\n fill: white;\n }\n }\n\n }\n\n div.text {\n color: ", ";\n margin-left: 16px;\n font : var(--headline-semi-bold-24-29);\n @media only screen and ", " {\n display: ", ";\n }\n }\n"])), function (props) { return props
|
|
14
|
+
exports.DividerStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 112px;\n height: 1px;\n background: ", ";\n margin: 0 24px;\n @media only screen and ", " {\n width: 25px;\n }\n"], ["\n width: 112px;\n height: 1px;\n background: ", ";\n margin: 0 24px;\n @media only screen and ", " {\n width: 25px;\n }\n"])), function (props) { return props.$activeStep > props.$index ? 'var(--primary)' : 'var(--grey-10)'; }, devices_1.devices.xl);
|
|
15
|
+
exports.StepStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: ", ";\n div.circle {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n color: ", ";\n font : var(--headline-extra-bold-24-29);\n @media only screen and ", " {\n width: 40px;\n height: 40px;\n }\n\n svg {\n path {\n fill: white;\n }\n }\n\n }\n\n div.text {\n color: ", ";\n margin-left: 16px;\n font : var(--headline-semi-bold-24-29);\n @media only screen and ", " {\n display: ", ";\n }\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: ", ";\n div.circle {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n color: ", ";\n font : var(--headline-extra-bold-24-29);\n @media only screen and ", " {\n width: 40px;\n height: 40px;\n }\n\n svg {\n path {\n fill: white;\n }\n }\n\n }\n\n div.text {\n color: ", ";\n margin-left: 16px;\n font : var(--headline-semi-bold-24-29);\n @media only screen and ", " {\n display: ", ";\n }\n }\n"])), function (props) { return props.$hasClickAction ? 'pointer' : 'initial'; }, function (props) { return props.$activeStep >= props.$index ? 'var(--primary)' : 'var(--grey-10)'; }, function (props) { return props.$activeStep >= props.$index ? 'white' : 'var(--grey-40)'; }, devices_1.devices.xl, function (props) { return props.$activeStep >= props.$index ? 'var(--dark)' : 'var(--grey-30)'; }, devices_1.devices.xl, function (props) { return props.$activeStep === props.$index ? 'block' : 'none'; });
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|