krl-alfred 1.25.0 → 1.27.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/Checkbox/Checkbox.styled.js +1 -1
- package/dist/components/Modal/Modal.js +2 -4
- package/dist/components/Modal/Modal.styled.js +3 -3
- package/dist/components/Modal/stories/Modal.stories.js +3 -7
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/package.json +1 -1
|
@@ -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.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n
|
|
15
|
+
exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n align-items:flex-start;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\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 &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: inline-block;\n cursor: ", ";\n margin: ", ";\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"], ["\n flex:1;\n position:relative;\n align-items:flex-start;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\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 &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: inline-block;\n cursor: ", ";\n margin: ", ";\n color:", ";\n label.label{\n display:block;\n margin:0;\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: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, 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";
|
|
@@ -49,7 +49,7 @@ var Modal = function (props) {
|
|
|
49
49
|
};
|
|
50
50
|
var onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, onBack = props.onBack, other = __rest(props, ["onPrimaryAction", "onSecondaryAction", "onBack"]);
|
|
51
51
|
return (showModal &&
|
|
52
|
-
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({}, other, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "header", children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onBack, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) })) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", { className: "title", children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { className: "headline-semi-bold-20-24", children: props.title })), props.titleDescription && ((0, jsx_runtime_1.jsx)("p", { className: "body-regular-14-17", children: props.titleDescription }))] }), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onClose, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] }), (0, jsx_runtime_1.
|
|
52
|
+
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({}, other, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "header", children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onBack, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) })) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", { className: "title", children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { className: "headline-semi-bold-20-24", children: props.title })), props.titleDescription && ((0, jsx_runtime_1.jsx)("p", { className: "body-regular-14-17", children: props.titleDescription }))] }), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onClose, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "content", children: (0, jsx_runtime_1.jsx)("div", { className: "contentInner", children: props.children }) }), (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", { className: "buttons", children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, children: props.primaryButtonText })), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && ((0, jsx_runtime_1.jsx)("div", { className: "divider caption-medium-12-15", children: "veya" })), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, children: props.secondaryButtonText })] }))] })] })) }), document.body));
|
|
53
53
|
};
|
|
54
54
|
exports.default = Modal;
|
|
55
55
|
Modal.defaultProps = {
|
|
@@ -66,8 +66,6 @@ Modal.defaultProps = {
|
|
|
66
66
|
},
|
|
67
67
|
showHeaderBorder: false,
|
|
68
68
|
showFooterBorder: false,
|
|
69
|
-
|
|
70
|
-
hasFixedHeight: false,
|
|
69
|
+
onMobileFixed: false,
|
|
71
70
|
titleAlignment: "center",
|
|
72
|
-
contentTitle: "",
|
|
73
71
|
};
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.OverlayStyled = exports.ModalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n
|
|
13
|
+
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n margin-bottom: ", "; \n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding: 0 24px;\n overflow: auto;\n position: relative;\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n margin-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n margin-bottom: ", "; \n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding: 0 24px;\n overflow: auto;\n position: relative;\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n margin-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"])), function (props) {
|
|
14
14
|
switch (props.size) {
|
|
15
15
|
case 'small':
|
|
16
16
|
return "375px";
|
|
@@ -21,7 +21,7 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
21
21
|
default:
|
|
22
22
|
return "462px";
|
|
23
23
|
}
|
|
24
|
-
}, devices_1.devices.
|
|
24
|
+
}, function (props) { return props.onMobileFixed && "\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 }\n "); }, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.showHeaderBorder ? '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) { return props.showFooterBorder ? '24px' : '0'; }, function (props) {
|
|
25
25
|
switch (props.buttonsAlignment) {
|
|
26
26
|
case 'vertical':
|
|
27
27
|
return 'column';
|
|
@@ -30,6 +30,6 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
30
30
|
default:
|
|
31
31
|
return 'column';
|
|
32
32
|
}
|
|
33
|
-
}, function (props) { return props.buttonsAlignment === 'horizontal' ? '24px' : '0'; });
|
|
33
|
+
}, function (props) { return props.buttonsAlignment === 'horizontal' ? (props.size === 'small' ? '16px' : '24px') : '0'; }, devices_1.devices.sm);
|
|
34
34
|
exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-40);\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"], ["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-40);\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"])));
|
|
35
35
|
var templateObject_1, templateObject_2;
|
|
@@ -34,7 +34,7 @@ exports.Default = {
|
|
|
34
34
|
title: 'Title',
|
|
35
35
|
showPrimaryButton: true,
|
|
36
36
|
showSecondaryButton: true,
|
|
37
|
-
|
|
37
|
+
onMobileFixed: false,
|
|
38
38
|
primaryButtonText: 'Primary Action',
|
|
39
39
|
secondaryButtonText: 'Other',
|
|
40
40
|
children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
|
|
@@ -71,7 +71,6 @@ exports.Type3 = {
|
|
|
71
71
|
showBackIcon: false,
|
|
72
72
|
showCloseIcon: true,
|
|
73
73
|
show: true,
|
|
74
|
-
contentTitle: 'Title',
|
|
75
74
|
showPrimaryButton: true,
|
|
76
75
|
showSecondaryButton: false,
|
|
77
76
|
buttonsAlignment: 'horizontal',
|
|
@@ -85,7 +84,6 @@ exports.Type4 = {
|
|
|
85
84
|
showBackIcon: false,
|
|
86
85
|
showCloseIcon: true,
|
|
87
86
|
show: true,
|
|
88
|
-
contentTitle: 'Title',
|
|
89
87
|
showPrimaryButton: true,
|
|
90
88
|
showSecondaryButton: true,
|
|
91
89
|
buttonsAlignment: 'horizontal',
|
|
@@ -105,9 +103,8 @@ exports.Type5 = {
|
|
|
105
103
|
showPrimaryButton: true,
|
|
106
104
|
showSecondaryButton: false,
|
|
107
105
|
showHeaderBorder: true,
|
|
108
|
-
showContentBorder: true,
|
|
109
106
|
showFooterBorder: true,
|
|
110
|
-
|
|
107
|
+
onMobileFixed: false,
|
|
111
108
|
primaryButtonText: 'Primary Action',
|
|
112
109
|
secondaryButtonText: 'Other',
|
|
113
110
|
titleAlignment: 'left',
|
|
@@ -125,9 +122,8 @@ exports.Type6 = {
|
|
|
125
122
|
showPrimaryButton: true,
|
|
126
123
|
showSecondaryButton: true,
|
|
127
124
|
showHeaderBorder: true,
|
|
128
|
-
showContentBorder: true,
|
|
129
125
|
showFooterBorder: true,
|
|
130
|
-
|
|
126
|
+
onMobileFixed: false,
|
|
131
127
|
primaryButtonText: 'Primary Action',
|
|
132
128
|
secondaryButtonText: 'Other',
|
|
133
129
|
titleAlignment: 'left',
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ProductCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ProductCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right:
|
|
13
|
+
exports.ProductCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
14
|
var templateObject_1;
|