krl-alfred 1.80.0 → 1.80.1
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/ProductCardHorizontal/ProductCardHorizontal.js +1 -1
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js +1 -1
- package/dist/components/SkeletonLoader/SkeletonLoader.js +2 -2
- package/dist/components/SkeletonLoader/SkeletonLoader.styled.js +1 -1
- package/dist/components/SkeletonLoader/props.js +1 -0
- package/package.json +1 -1
|
@@ -24,6 +24,6 @@ var ProductCardHorizontal = function (_a) {
|
|
|
24
24
|
var item = _a.item, children = _a.children;
|
|
25
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
26
26
|
};
|
|
27
|
-
return (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$hasLoading": hasLoading }, { children: (0, jsx_runtime_1.jsx)("a", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.
|
|
27
|
+
return (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$hasLoading": hasLoading }, { children: (0, jsx_runtime_1.jsx)("a", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "142px", height: "77px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "title" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "400px", height: "19px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "description" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "300px", height: "17px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "200px", height: "17px", hasInset: true })] }))] }))] })) }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] }))] })) })) }))));
|
|
28
28
|
};
|
|
29
29
|
exports.default = ProductCardHorizontal;
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ProductCardHorizontalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n }\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n
|
|
13
|
+
exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n position: relative;\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n ", ";\n }\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n position: relative;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n position: relative;\n .price {\n margin-right: 4px;\n font:var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font:var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n position: relative;\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n ", ";\n }\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n position: relative;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n position: relative;\n .price {\n margin-right: 4px;\n font:var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font:var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n"])), function (props) { return !props.$hasLoading && "\n &:hover {\n background: var(--dark-opacity-3);\n }\n "; }, function (props) { return props.$hasLoading ? "none" : "1px solid var(--dark-opacity-5)"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "100%" : "90%"; }, function (props) { return props.$hasLoading ? "100%" : "90%"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "margin-bottom: 0.25rem" : null; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
14
|
var templateObject_1;
|
|
@@ -4,8 +4,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
4
4
|
var props_1 = require("./props");
|
|
5
5
|
var SkeletonLoader_styled_1 = require("./SkeletonLoader.styled");
|
|
6
6
|
var SkeletonLoader = function (_a) {
|
|
7
|
-
var _b = _a.width, width = _b === void 0 ? props_1.SkeletonLoaderDefault.width : _b, _c = _a.height, height = _c === void 0 ? props_1.SkeletonLoaderDefault.height : _c;
|
|
8
|
-
return ((0, jsx_runtime_1.jsx)(SkeletonLoader_styled_1.SkeletonLoaderStyled, { "$width": width, "$height": height }));
|
|
7
|
+
var _b = _a.width, width = _b === void 0 ? props_1.SkeletonLoaderDefault.width : _b, _c = _a.height, height = _c === void 0 ? props_1.SkeletonLoaderDefault.height : _c, _d = _a.hasInset, hasInset = _d === void 0 ? props_1.SkeletonLoaderDefault.hasInset : _d;
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)(SkeletonLoader_styled_1.SkeletonLoaderStyled, { "$width": width, "$height": height, "$hasInset": hasInset }));
|
|
9
9
|
};
|
|
10
10
|
SkeletonLoader.defaultProps = {};
|
|
11
11
|
exports.default = SkeletonLoader;
|
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.SkeletonLoaderStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.SkeletonLoaderStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n @keyframes shineSkeleton {\n 0% {\n background-color: var(--dark-opacity-5);\n }\n 50% {\n background-color: var(--dark-opacity-3);\n }\n 100% {\n background-color: var(--dark-opacity-5);\n }\n }\n height: ", ";\n max-width: ", ";\n width: 100%;\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n animation: shineSkeleton 1s ease infinite;\n"], ["\n @keyframes shineSkeleton {\n 0% {\n background-color: var(--dark-opacity-5);\n }\n 50% {\n background-color: var(--dark-opacity-3);\n }\n 100% {\n background-color: var(--dark-opacity-5);\n }\n }\n height: ", ";\n max-width: ", ";\n width: 100%;\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n animation: shineSkeleton 1s ease infinite;\n"])), function (props) { return props.$height; }, function (props) { return props.$width; });
|
|
12
|
+
exports.SkeletonLoaderStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n @keyframes shineSkeleton {\n 0% {\n background-color: var(--dark-opacity-5);\n }\n 50% {\n background-color: var(--dark-opacity-3);\n }\n 100% {\n background-color: var(--dark-opacity-5);\n }\n }\n height: ", ";\n max-width: ", ";\n width: 100%;\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n animation: shineSkeleton 1s ease infinite;\n ", "\n"], ["\n @keyframes shineSkeleton {\n 0% {\n background-color: var(--dark-opacity-5);\n }\n 50% {\n background-color: var(--dark-opacity-3);\n }\n 100% {\n background-color: var(--dark-opacity-5);\n }\n }\n height: ", ";\n max-width: ", ";\n width: 100%;\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n animation: shineSkeleton 1s ease infinite;\n ", "\n"])), function (props) { return props.$height; }, function (props) { return props.$width; }, function (props) { return props.$hasInset && "\n position: absolute;\n inset:0;\n height: 100%;\n max-height: 100%;\n "; });
|
|
13
13
|
var templateObject_1;
|