krl-alfred 1.54.6 → 1.54.8
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/CircleProgress/CircleProgress.js +1 -1
- package/dist/components/Input/Input.styled.js +1 -1
- package/dist/components/Modal/Modal.styled.js +1 -1
- package/dist/components/Modal/stories/Modal.stories.js +0 -3
- package/dist/components/OtpInput/Otp.js +1 -1
- package/dist/components/OtpInput/OtpInput.styled.js +1 -1
- package/package.json +1 -1
|
@@ -19,7 +19,7 @@ var CircleProgress = function (props) {
|
|
|
19
19
|
return (0, jsx_runtime_1.jsxs)(CircleProgress_styled_1.CircleProgressStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(react_circular_progressbar_1.CircularProgressbarWithChildren, { styles: (0, react_circular_progressbar_1.buildStyles)({
|
|
20
20
|
pathColor: "var(--primary)",
|
|
21
21
|
trailColor: "var(--dark-opacity-5)"
|
|
22
|
-
}), strokeWidth: 12, value: props.activeStep / props.steps.length * 100, children: (0, jsx_runtime_1.jsxs)("div", { className: "text body-bold-14-17", children: [(0, jsx_runtime_1.jsxs)("span", { className: "title-bold-16-19", children: [props.activeStep, "/"] }), props.steps.length] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "info", children: [(0, jsx_runtime_1.jsx)("h1", { className: "title-bold-16-19", children: (_a = props.steps.find(function (p) { return p.index === props.activeStep; })) === null || _a === void 0 ? void 0 : _a.text }), (0, jsx_runtime_1.jsx)("p", { className: "body-regular-13-16", children: props.activeStep === props.steps.length ? 'Bütün adımları
|
|
22
|
+
}), strokeWidth: 12, value: props.activeStep / props.steps.length * 100, children: (0, jsx_runtime_1.jsxs)("div", { className: "text body-bold-14-17", children: [(0, jsx_runtime_1.jsxs)("span", { className: "title-bold-16-19", children: [props.activeStep, "/"] }), props.steps.length] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "info", children: [(0, jsx_runtime_1.jsx)("h1", { className: "title-bold-16-19", children: (_a = props.steps.find(function (p) { return p.index === props.activeStep; })) === null || _a === void 0 ? void 0 : _a.text }), (0, jsx_runtime_1.jsx)("p", { className: "body-regular-13-16", children: props.activeStep === props.steps.length ? 'Bütün adımları tamamladın' : "Sonraki Ad\u0131m: ".concat((_b = props.steps.find(function (p) { return p.index === props.activeStep + 1; })) === null || _b === void 0 ? void 0 : _b.text) })] })] }));
|
|
23
23
|
};
|
|
24
24
|
CircleProgress.defaultProps = {
|
|
25
25
|
steps: [],
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.InputStyled = exports.Container = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
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\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 }\n }\n\n .input {\n position: relative;\n\n .showHide {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\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 }\n }\n\n .input {\n position: relative;\n\n .showHide {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\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'; });
|
|
13
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __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
|
|
13
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __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
14
|
var templateObject_1, templateObject_2;
|
|
@@ -21,7 +21,7 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
21
21
|
default:
|
|
22
22
|
return "462px";
|
|
23
23
|
}
|
|
24
|
-
}, function (props) { return !props.autoHeight && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-height: initial;\n }\n "); }, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.showHeaderBorder ? '24px' : '0'; }, function (props) { return props.showFooterBorder ? '24px' : '0'; }, function (props) { return props.buttonsAlignment === 'horizontal' ? 'flex-start' : 'space-between'; }, function (props) { return props.showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
|
|
24
|
+
}, function (props) { return !props.autoHeight && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-width: 100%;\n max-height: initial;\n }\n "); }, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.showHeaderBorder ? '24px' : '0'; }, function (props) { return props.showFooterBorder ? '24px' : '0'; }, function (props) { return props.buttonsAlignment === 'horizontal' ? 'flex-start' : 'space-between'; }, function (props) { return props.showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
|
|
25
25
|
switch (props.buttonsAlignment) {
|
|
26
26
|
case 'vertical':
|
|
27
27
|
return 'column';
|
|
@@ -34,7 +34,6 @@ exports.Default = {
|
|
|
34
34
|
title: 'Title',
|
|
35
35
|
showPrimaryButton: true,
|
|
36
36
|
showSecondaryButton: true,
|
|
37
|
-
onMobileFixed: false,
|
|
38
37
|
primaryButtonText: 'Primary Action',
|
|
39
38
|
secondaryButtonText: 'Other',
|
|
40
39
|
children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
|
|
@@ -104,7 +103,6 @@ exports.Type5 = {
|
|
|
104
103
|
showSecondaryButton: false,
|
|
105
104
|
showHeaderBorder: true,
|
|
106
105
|
showFooterBorder: true,
|
|
107
|
-
onMobileFixed: false,
|
|
108
106
|
primaryButtonText: 'Primary Action',
|
|
109
107
|
secondaryButtonText: 'Other',
|
|
110
108
|
titleAlignment: 'left',
|
|
@@ -123,7 +121,6 @@ exports.Type6 = {
|
|
|
123
121
|
showSecondaryButton: true,
|
|
124
122
|
showHeaderBorder: true,
|
|
125
123
|
showFooterBorder: true,
|
|
126
|
-
onMobileFixed: false,
|
|
127
124
|
primaryButtonText: 'Primary Action',
|
|
128
125
|
secondaryButtonText: 'Other',
|
|
129
126
|
titleAlignment: 'left',
|
|
@@ -19,7 +19,7 @@ var OtpInput_styled_1 = require("./OtpInput.styled");
|
|
|
19
19
|
var react_otp_input_1 = __importDefault(require("react-otp-input"));
|
|
20
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
21
|
var Otp = function (props) {
|
|
22
|
-
return (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(react_otp_input_1.default, { value: props.value, inputType: "number", onChange: props.onInputChange, numInputs: props.inputSize, shouldAutoFocus: props.autoFocus, renderInput: function (props) { return (0, jsx_runtime_1.jsx)("input", __assign({}, props)); } }), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] }));
|
|
22
|
+
return (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(react_otp_input_1.default, { value: props.value, inputType: "number", onChange: props.onInputChange, numInputs: props.inputSize, shouldAutoFocus: props.autoFocus, renderInput: function (props) { return (0, jsx_runtime_1.jsx)("input", __assign({}, props, { placeholder: "\u00A0" })); } }), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] }));
|
|
23
23
|
};
|
|
24
24
|
Otp.defaultProps = {
|
|
25
25
|
inputSize: 4,
|
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.OtpInputStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.OtpInputStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n input {\n font-family: var(--font-family-sans-serif);\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font-weight: 600;\n font-size: 40px;\n line-height: 19px;\n -moz-appearance: textfield;\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:not(:last-child) {\n margin-right: 18.33px;\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n input {\n font-family: var(--font-family-sans-serif);\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font-weight: 600;\n font-size: 40px;\n line-height: 19px;\n -moz-appearance: textfield;\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:not(:last-child) {\n margin-right: 18.33px;\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"])), function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-10)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
12
|
+
exports.OtpInputStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n input {\n font-family: var(--font-family-sans-serif);\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font-weight: 600;\n font-size: 40px;\n line-height: 19px;\n -moz-appearance: textfield;\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:not(:last-child) {\n margin-right: 18.33px;\n }\n \n &:focus,&:not(:placeholder-shown) {\n outline: none;\n border-color: ", ";\n }\n &::selection{\n background-color: inherit;\n color:inherit;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n input {\n font-family: var(--font-family-sans-serif);\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font-weight: 600;\n font-size: 40px;\n line-height: 19px;\n -moz-appearance: textfield;\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:not(:last-child) {\n margin-right: 18.33px;\n }\n \n &:focus,&:not(:placeholder-shown) {\n outline: none;\n border-color: ", ";\n }\n &::selection{\n background-color: inherit;\n color:inherit;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"])), function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-10)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
13
13
|
var templateObject_1;
|