krl-alfred 1.4.0 → 1.5.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/assets/svg/ArrowRightIcon.js +1 -1
- package/dist/assets/svg/SpinnerIcon.js +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +9 -19
- package/dist/components/Breadcrumbs/Breadcrumbs.styled.js +2 -2
- package/dist/components/Breadcrumbs/stories/Breadcrumbs.stories.js +4 -1
- package/dist/components/Button/Button.js +2 -13
- package/dist/components/CategoryMenu/CategoryMenu.js +5 -5
- package/dist/components/CategoryMenu/CategoryMenu.styled.js +1 -1
- package/dist/components/CategoryMenu/stories/CategoryMenu.stories.js +4 -1
- package/dist/components/Checkbox/Checkbox.js +1 -12
- package/dist/components/ColorPalette/ColorPalette.js +3 -14
- package/dist/components/Icon/ArrowSmallDown.js +1 -1
- package/dist/components/Icon/ArrowSmallUp.js +1 -1
- package/dist/components/Icon/CloseHover.js +1 -1
- package/dist/components/Icon/Icon.js +12 -1
- package/dist/components/Icon/Laptop.js +1 -1
- package/dist/components/Icon/index.js +134 -28
- package/dist/components/Icon/props.js +1 -1
- package/dist/components/Modal/Modal.js +1 -1
- package/dist/components/Spinner/Spinner.js +1 -12
- package/dist/components/Typography/Typography.js +2 -13
- package/dist/jsons/breadcrumbs.json +6 -0
- package/package.json +3 -1
|
@@ -13,6 +13,6 @@ var __assign = (this && this.__assign) || function () {
|
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
14
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
15
|
var ArrowRightIcon = function (props) {
|
|
16
|
-
return ((0, jsx_runtime_1.jsx)("svg", __assign({}, props, { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg"
|
|
16
|
+
return ((0, jsx_runtime_1.jsx)("svg", __assign({}, props, { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5.66602 3.33268L10.3327 7.99935L5.66602 12.666", stroke: props.color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
|
|
17
17
|
};
|
|
18
18
|
exports.default = ArrowRightIcon;
|
|
@@ -13,6 +13,6 @@ var __assign = (this && this.__assign) || function () {
|
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
14
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
15
|
var SpinnerIcon = function (props) {
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)("svg", __assign({}, props, { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg"
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)("svg", __assign({}, props, { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "2", r: "2", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.3327 3.66732C13.3327 4.12756 12.9596 4.50065 12.4993 4.50065C12.0391 4.50065 11.666 4.12756 11.666 3.66732C11.666 3.20708 12.0391 2.83398 12.4993 2.83398C12.9596 2.83398 13.3327 3.20708 13.3327 3.66732Z", fill: "white" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: "7.99935", cy: "14.6673", rx: "1.33333", ry: "1.33333", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.00065 3.66732C5.00065 4.67984 4.17984 5.50065 3.16732 5.50065C2.1548 5.50065 1.33398 4.67984 1.33398 3.66732C1.33398 2.6548 2.1548 1.83398 3.16732 1.83398C4.17984 1.83398 5.00065 2.6548 5.00065 3.66732Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.33333 8.33268C3.33333 9.25316 2.58714 9.99935 1.66667 9.99935C0.746192 9.99935 0 9.25316 0 8.33268C0 7.41221 0.746192 6.66602 1.66667 6.66602C2.58714 6.66602 3.33333 7.41221 3.33333 8.33268Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.666 8.33398C15.666 8.88627 15.2183 9.33398 14.666 9.33398C14.1137 9.33398 13.666 8.88627 13.666 8.33398C13.666 7.7817 14.1137 7.33398 14.666 7.33398C15.2183 7.33398 15.666 7.7817 15.666 8.33398Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.83398 12.834C4.83398 13.6624 4.16241 14.334 3.33398 14.334C2.50556 14.334 1.83398 13.6624 1.83398 12.834C1.83398 12.0056 2.50556 11.334 3.33398 11.334C4.16241 11.334 4.83398 12.0056 4.83398 12.834Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.8333 12.5007C13.8333 13.145 13.311 13.6673 12.6667 13.6673C12.0223 13.6673 11.5 13.145 11.5 12.5007C11.5 11.8563 12.0223 11.334 12.6667 11.334C13.311 11.334 13.8333 11.8563 13.8333 12.5007Z", fill: "white" })] })));
|
|
17
17
|
};
|
|
18
18
|
exports.default = SpinnerIcon;
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
@@ -23,6 +12,7 @@ var refactorColumn_1 = __importDefault(require("./../../utils/refactorColumn"));
|
|
|
23
12
|
var Breadcrumbs = function (props) {
|
|
24
13
|
var data = props.data, subMenuRowLength = props.subMenuRowLength;
|
|
25
14
|
var _a = react_1.default.useState(false), showDropdown = _a[0], setShowDropdown = _a[1];
|
|
15
|
+
var primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');
|
|
26
16
|
var breadcrumbSmRef = react_1.default.useRef(null);
|
|
27
17
|
var getSubData = function () {
|
|
28
18
|
var _a;
|
|
@@ -41,7 +31,7 @@ var Breadcrumbs = function (props) {
|
|
|
41
31
|
};
|
|
42
32
|
var ButtonLinkComponent = function (_a) {
|
|
43
33
|
var item = _a.item, children = _a.children;
|
|
44
|
-
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a",
|
|
34
|
+
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
|
|
45
35
|
};
|
|
46
36
|
react_1.default.useEffect(function () {
|
|
47
37
|
if (breadcrumbSmRef && breadcrumbSmRef.current)
|
|
@@ -51,21 +41,21 @@ var Breadcrumbs = function (props) {
|
|
|
51
41
|
var data = _a.data;
|
|
52
42
|
var grid = subMenuRowLength && Math.ceil(data.length / subMenuRowLength);
|
|
53
43
|
var dataWithColumn = (0, refactorColumn_1.default)(data, subMenuRowLength || 0);
|
|
54
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.DropdownList,
|
|
44
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.DropdownList, { gridTemplateColumns: grid, children: dataWithColumn === null || dataWithColumn === void 0 ? void 0 : dataWithColumn.map(function (childColumn) {
|
|
55
45
|
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemList, { children: childColumn === null || childColumn === void 0 ? void 0 : childColumn.map(function (child) {
|
|
56
|
-
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem,
|
|
46
|
+
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem, { isActive: child.isActive, isSeeAll: child.isSeeAll, className: "caption-medium-12-15", children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: child, children: child.name }) }));
|
|
57
47
|
}) }) }));
|
|
58
|
-
}) })
|
|
48
|
+
}) }) }));
|
|
59
49
|
};
|
|
60
50
|
var SubMenuMobile = function () {
|
|
61
51
|
var _a;
|
|
62
|
-
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper,
|
|
63
|
-
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem,
|
|
64
|
-
}) }))
|
|
52
|
+
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper, { ref: breadcrumbSmRef, children: (_a = getSubData()) === null || _a === void 0 ? void 0 : _a.map(function (item) {
|
|
53
|
+
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, { isActive: item.isActive, className: "caption-bold-12-15", children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: item.name }) }));
|
|
54
|
+
}) }));
|
|
65
55
|
};
|
|
66
56
|
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
|
|
67
57
|
var _a;
|
|
68
|
-
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft" }) }), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener,
|
|
58
|
+
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft" }) }), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { onClick: function () { return setShowDropdown(!showDropdown); }, className: "caption-bold-12-15", children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: primaryColor, name: !showDropdown ? "ArrowSmallDown" : "ArrowSmallUp" })] }), showDropdown && (0, jsx_runtime_1.jsx)(SubMenu, { data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, { item: breadCrumbItem, children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { className: "caption-bold-12-15", children: breadCrumbItem.name })] }))] }, breadCrumbItem.id));
|
|
69
59
|
}) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
|
|
70
60
|
};
|
|
71
61
|
exports.default = Breadcrumbs;
|
|
@@ -20,8 +20,8 @@ exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templat
|
|
|
20
20
|
exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 4px;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 4px;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n }\n"])));
|
|
21
21
|
exports.DropdownList = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0px 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 48px;\n top: calc(100% + 8px);\n"], ["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0px 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 48px;\n top: calc(100% + 8px);\n"])), function (props) { return props.gridTemplateColumns || "3"; });
|
|
22
22
|
exports.SubCategoryItem = styled_components_1.default.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
23
|
-
exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display:
|
|
24
|
-
exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n padding: 0;\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n }\n"], ["\n display: block;\n padding: 0;\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n }\n"])), function (props) { return (props.isActive ? "" : "&:hover{"); }, function (props) { return (props.isActive ? "" : "}"); });
|
|
23
|
+
exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"], ["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"])));
|
|
24
|
+
exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n padding: 0;\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"], ["\n display: block;\n padding: 0;\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"])), function (props) { return (props.isActive ? "" : "&:hover{"); }, function (props) { return (props.isActive ? "" : "}"); }, function (props) { return (props.isSeeAll ? "font-weight: 700;" : ""); });
|
|
25
25
|
exports.BreadcrumbsListDropdownListItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
|
|
26
26
|
exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n position: relative;\n overflow: auto;\n padding: 0;\n white-space: nowrap;\n gap: 8px;\n width: 100%;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding-bottom: 30px;\n margin-bottom: 0;\n margin-top: 24px;\n display: none;\n &::-webkit-scrollbar {\n display: none;\n }\n @media only screen and ", " {\n display: flex;\n }\n"], ["\n display: flex;\n position: relative;\n overflow: auto;\n padding: 0;\n white-space: nowrap;\n gap: 8px;\n width: 100%;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding-bottom: 30px;\n margin-bottom: 0;\n margin-top: 24px;\n display: none;\n &::-webkit-scrollbar {\n display: none;\n }\n @media only screen and ", " {\n display: flex;\n }\n"])), devices_1.devices.md);
|
|
27
27
|
exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n a {\n display: block;\n padding: 10px 24px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0px 6px 30px #eae9f0;\n border-radius: 4px;\n text-align: center;\n color: ", ";\n }\n"], ["\n display: block;\n a {\n display: block;\n padding: 10px 24px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0px 6px 30px #eae9f0;\n border-radius: 4px;\n text-align: center;\n color: ", ";\n }\n"])), function (props) { return (props.isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
|
|
@@ -10,7 +10,10 @@ exports.default = {
|
|
|
10
10
|
title: "Components/Breadcrumbs",
|
|
11
11
|
component: Breadcrumbs_1.default,
|
|
12
12
|
tags: ["autodocs"],
|
|
13
|
-
argTypes: {
|
|
13
|
+
argTypes: {
|
|
14
|
+
subMenuRowLength: { control: "number" },
|
|
15
|
+
data: { control: "disabled" },
|
|
16
|
+
},
|
|
14
17
|
};
|
|
15
18
|
exports.Default = {
|
|
16
19
|
argTypes: {
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
@@ -26,7 +15,7 @@ var Children = function (props) {
|
|
|
26
15
|
var Button = function (props) {
|
|
27
16
|
var _a;
|
|
28
17
|
var isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children;
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled,
|
|
30
|
-
(0, jsx_runtime_1.jsx)(Children,
|
|
18
|
+
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)("body-bold-14-17", (_a = {}, _a["loading"] = isLoading, _a)), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, children: isLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { width: "16px", height: "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
|
|
19
|
+
(0, jsx_runtime_1.jsx)(Children, { icon: icon, children: children }) }));
|
|
31
20
|
};
|
|
32
21
|
exports.default = Button;
|
|
@@ -34,19 +34,19 @@ var CategoryMenu = function (props) {
|
|
|
34
34
|
var data = props.data, subMenuRowLength = props.subMenuRowLength;
|
|
35
35
|
var ButtonLinkComponent = function (_a) {
|
|
36
36
|
var item = _a.item, children = _a.children;
|
|
37
|
-
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a",
|
|
37
|
+
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
|
|
38
38
|
};
|
|
39
39
|
var MenuButton = function (_a) {
|
|
40
40
|
var item = __rest(_a, []);
|
|
41
|
-
return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem,
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, { isActiveCategory: item.isActive, children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon }) }), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, { className: "caption-semi-bold-12-15", children: item.name })] }) }), item.children] }));
|
|
42
42
|
};
|
|
43
43
|
var CategorySubMenu = function (_a) {
|
|
44
44
|
var data = _a.data;
|
|
45
45
|
var grid = subMenuRowLength && Math.ceil(data.length / subMenuRowLength);
|
|
46
46
|
var dataWithColumn = (0, refactorColumn_1.default)(data, subMenuRowLength || 0);
|
|
47
|
-
return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu,
|
|
48
|
-
return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInner, { children: item.map(function (subItem, subKey) { return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInnerItem,
|
|
49
|
-
}) }))
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu, { gridTemplateColumns: grid, children: dataWithColumn.map(function (item, key) {
|
|
48
|
+
return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInner, { children: item.map(function (subItem, subKey) { return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInnerItem, { isSeeAll: subItem.isSeeAll, children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: subItem, children: (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInnerItemButtonInner, { className: "caption-medium-12-15", children: subItem.name }) }) }, subItem.id)); }) }) }, key));
|
|
49
|
+
}) }));
|
|
50
50
|
};
|
|
51
51
|
return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
|
|
52
52
|
return ((0, jsx_runtime_1.jsx)(MenuButton, __assign({}, item, { children: item.children.length > 0 && ((0, jsx_runtime_1.jsx)(CategorySubMenu, { data: item.children })) }), item.id));
|
|
@@ -37,7 +37,7 @@ exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject
|
|
|
37
37
|
exports.CategoryItemButtonTitle = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-top: 8px;\n display:block;\n"], ["\n margin-top: 8px;\n display:block;\n"])));
|
|
38
38
|
exports.SubMenu = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n position: absolute;\n left: 0;\n border-radius: 8px;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", 154px)\n"], ["\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n position: absolute;\n left: 0;\n border-radius: 8px;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", 154px)\n"])), function (props) { return props.gridTemplateColumns || '3'; });
|
|
39
39
|
exports.SubCategoryItem = styled_components_1.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n padding: 0;\n"], ["\n display: block;\n padding: 0;\n"])));
|
|
40
|
-
exports.SubCategoryInner = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n display:
|
|
40
|
+
exports.SubCategoryInner = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n display: grid;\n gap:4px 0;\n"], ["\n padding: 0;\n display: grid;\n gap:4px 0;\n"])));
|
|
41
41
|
exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a > span {\n font-weight: ", ";\n }\n"], ["\n padding: 0;\n display: block;\n a > span {\n font-weight: ", ";\n }\n"])), function (props) { return props.isSeeAll ? '600' : '500'; });
|
|
42
42
|
exports.SubCategoryInnerItemButtonInner = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display:block;\n padding: 0;\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:hover {\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 600;\n }\n"], ["\n display:block;\n padding: 0;\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:hover {\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 600;\n }\n"])));
|
|
43
43
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -10,7 +10,10 @@ exports.default = {
|
|
|
10
10
|
title: 'Components/CategoryMenu',
|
|
11
11
|
component: CategoryMenu_1.default,
|
|
12
12
|
tags: ['autodocs'],
|
|
13
|
-
argTypes: {
|
|
13
|
+
argTypes: {
|
|
14
|
+
subMenuRowLength: { control: 'number' },
|
|
15
|
+
data: { control: 'disabled' }
|
|
16
|
+
}
|
|
14
17
|
};
|
|
15
18
|
exports.Default = {
|
|
16
19
|
argTypes: {
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
@@ -21,7 +10,7 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
21
10
|
var Checkbox = function (props) {
|
|
22
11
|
var _a, _b, _c, _d;
|
|
23
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;
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled,
|
|
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" }), (0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [(0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "small", _a), (_b = {}, _b["title-medium-16-19"] = size === "medium", _b)), htmlFor: id, children: label }), (0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("description", (_c = {}, _c["body-regular-13-16"] = size === "small", _c), (_d = {}, _d["body-regular-13-16"] = size === "medium", _d)), htmlFor: id, children: description })] })] }));
|
|
25
14
|
};
|
|
26
15
|
exports.default = Checkbox;
|
|
27
16
|
Checkbox.propTypes = {
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
@@ -22,14 +11,14 @@ var ColorPalette = function (props) {
|
|
|
22
11
|
var _b = _a.gradient, gradient = _b === void 0 ? props.gradient : _b, _c = _a.data, data = _c === void 0 ? props.data : _c;
|
|
23
12
|
return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ColorItem, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Bg, { gradient: gradient, data: data }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Text, { children: Object.entries(data).map(function (_a) {
|
|
24
13
|
var key4 = _a[0], value4 = _a[1];
|
|
25
|
-
return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ValueListWrapper, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Title,
|
|
14
|
+
return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ValueListWrapper, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Title, { className: "caption-bold-12-15", children: key4 }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Value, { className: "caption-regular-12-15", children: value4 })] }, key4));
|
|
26
15
|
}) })] }));
|
|
27
16
|
};
|
|
28
17
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: colors_json_1.default.map(function (value, key) {
|
|
29
18
|
var _a;
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1",
|
|
19
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "headline-bold-24-29", children: value.name }), (0, jsx_runtime_1.jsx)("div", { children: (_a = value === null || value === void 0 ? void 0 : value.children) === null || _a === void 0 ? void 0 : _a.map(function (value2, key2) {
|
|
31
20
|
var _a;
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1",
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "headline-medium-18-22", children: value2.name }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.ColorPaletteStyled, { children: (_a = value2 === null || value2 === void 0 ? void 0 : value2.variants) === null || _a === void 0 ? void 0 : _a.map(function (value3, key3) {
|
|
33
22
|
return ((0, jsx_runtime_1.jsx)(Item, { gradient: value3 === null || value3 === void 0 ? void 0 : value3.gradient, data: value3.data }, key3));
|
|
34
23
|
}) })] }, key2));
|
|
35
24
|
}) })] }, key));
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgArrowSmallDown = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M16 10L12 14L8 10", stroke:
|
|
39
|
+
var SvgArrowSmallDown = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M16 10L12 14L8 10", stroke: props.stroke, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
40
|
exports.default = SvgArrowSmallDown;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgArrowSmallUp = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.33203 9.33203L7.9987 6.66536L10.6654 9.33203", stroke:
|
|
39
|
+
var SvgArrowSmallUp = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.33203 9.33203L7.9987 6.66536L10.6654 9.33203", stroke: props.stroke, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
40
|
exports.default = SvgArrowSmallUp;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgCloseHover = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 92, height: 92, viewBox: "0 0 92 92", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsxs)("g",
|
|
39
|
+
var SvgCloseHover = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 92, height: 92, viewBox: "0 0 92 92", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsxs)("g", { filter: "url(#filter0_d_14558_111532)", children: [(0, jsx_runtime_1.jsx)("rect", { x: 30, y: 24, width: 32, height: 32, rx: 8, fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M51.6667 45.6667L41 35", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M51.6667 35L41 45.6667", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", { id: "filter0_d_14558_111532", x: 0, y: 0, width: 92, height: 92, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), (0, jsx_runtime_1.jsx)("feOffset", { dy: 6 }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: 15 }), (0, jsx_runtime_1.jsx)("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.916133 0 0 0 0 0.91559 0 0 0 0 0.942743 0 0 0 1 0" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_14558_111532" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_14558_111532", result: "shape" })] }) })] }))); };
|
|
40
40
|
exports.default = SvgCloseHover;
|
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
14
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
15
|
var index_1 = require("./index");
|
|
5
16
|
var Icon = function (props) {
|
|
6
|
-
return index_1.iconList[props.name] || (0, jsx_runtime_1.jsx)("div", {});
|
|
17
|
+
return index_1.iconList[props.name](__assign({}, props)) || (0, jsx_runtime_1.jsx)("div", {});
|
|
7
18
|
};
|
|
8
19
|
exports.default = Icon;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgLaptop = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsxs)("g",
|
|
39
|
+
var SvgLaptop = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_14221_100226)", children: [(0, jsx_runtime_1.jsx)("rect", { width: 24, height: 24, transform: "translate(0.5)" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.41304 16.3636V6C3.41304 4.89543 4.30848 4 5.41305 4H19.587C20.6915 4 21.587 4.89543 21.587 6V16.3636M3.41304 16.3636H21.587M3.41304 16.3636H2.45652V16.3636C1.92825 16.3636 1.5 16.7919 1.5 17.3202V18.5C1.5 19.3284 2.17157 20 3 20H12.5H22C22.8284 20 23.5 19.3284 23.5 18.5V17.8636C23.5 17.0352 22.8284 16.3636 22 16.3636H21.587M10.5 7H14.3913", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_14221_100226", children: (0, jsx_runtime_1.jsx)("rect", { width: 24, height: 24, fill: "white", transform: "translate(0.5)" }) }) })] }))); };
|
|
40
40
|
exports.default = SvgLaptop;
|
|
@@ -1,4 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
2
24
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
26
|
};
|
|
@@ -62,32 +84,116 @@ Object.defineProperty(exports, "SwitchPassive", { enumerable: true, get: functio
|
|
|
62
84
|
var Watch_1 = __importDefault(require("./Watch"));
|
|
63
85
|
Object.defineProperty(exports, "Watch", { enumerable: true, get: function () { return Watch_1.default; } });
|
|
64
86
|
exports.iconList = {
|
|
65
|
-
Again: (
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
Again: function (_a) {
|
|
88
|
+
var props = __rest(_a, []);
|
|
89
|
+
return (0, jsx_runtime_1.jsx)(Again_1.default, __assign({}, props));
|
|
90
|
+
},
|
|
91
|
+
ArrowDown: function (_a) {
|
|
92
|
+
var props = __rest(_a, []);
|
|
93
|
+
return (0, jsx_runtime_1.jsx)(ArrowDown_1.default, __assign({}, props));
|
|
94
|
+
},
|
|
95
|
+
ArrowLeft: function (_a) {
|
|
96
|
+
var props = __rest(_a, []);
|
|
97
|
+
return (0, jsx_runtime_1.jsx)(ArrowLeft_1.default, __assign({}, props));
|
|
98
|
+
},
|
|
99
|
+
ArrowMedium: function (_a) {
|
|
100
|
+
var props = __rest(_a, []);
|
|
101
|
+
return (0, jsx_runtime_1.jsx)(ArrowMedium_1.default, __assign({}, props));
|
|
102
|
+
},
|
|
103
|
+
ArrowRight: function (_a) {
|
|
104
|
+
var props = __rest(_a, []);
|
|
105
|
+
return (0, jsx_runtime_1.jsx)(ArrowRight_1.default, __assign({}, props));
|
|
106
|
+
},
|
|
107
|
+
ArrowSmallDown: function (_a) {
|
|
108
|
+
var props = __rest(_a, []);
|
|
109
|
+
return (0, jsx_runtime_1.jsx)(ArrowSmallDown_1.default, __assign({}, props));
|
|
110
|
+
},
|
|
111
|
+
ArrowSmallUp: function (_a) {
|
|
112
|
+
var props = __rest(_a, []);
|
|
113
|
+
return (0, jsx_runtime_1.jsx)(ArrowSmallUp_1.default, __assign({}, props));
|
|
114
|
+
},
|
|
115
|
+
Baby: function (_a) {
|
|
116
|
+
var props = __rest(_a, []);
|
|
117
|
+
return (0, jsx_runtime_1.jsx)(Baby_1.default, __assign({}, props));
|
|
118
|
+
},
|
|
119
|
+
Call: function (_a) {
|
|
120
|
+
var props = __rest(_a, []);
|
|
121
|
+
return (0, jsx_runtime_1.jsx)(Call_1.default, __assign({}, props));
|
|
122
|
+
},
|
|
123
|
+
Campaign: function (_a) {
|
|
124
|
+
var props = __rest(_a, []);
|
|
125
|
+
return (0, jsx_runtime_1.jsx)(Campaign_1.default, __assign({}, props));
|
|
126
|
+
},
|
|
127
|
+
CheckboxElementChecked: function (_a) {
|
|
128
|
+
var props = __rest(_a, []);
|
|
129
|
+
return ((0, jsx_runtime_1.jsx)(CheckboxElementChecked_1.default, __assign({}, props)));
|
|
130
|
+
},
|
|
131
|
+
CheckboxElementDisabled: function (_a) {
|
|
132
|
+
var props = __rest(_a, []);
|
|
133
|
+
return ((0, jsx_runtime_1.jsx)(CheckboxElementDisabled_1.default, __assign({}, props)));
|
|
134
|
+
},
|
|
135
|
+
CheckboxElementInvalid: function (_a) {
|
|
136
|
+
var props = __rest(_a, []);
|
|
137
|
+
return ((0, jsx_runtime_1.jsx)(CheckboxElementInvalid_1.default, __assign({}, props)));
|
|
138
|
+
},
|
|
139
|
+
CheckboxElementUncheck: function (_a) {
|
|
140
|
+
var props = __rest(_a, []);
|
|
141
|
+
return ((0, jsx_runtime_1.jsx)(CheckboxElementUncheck_1.default, __assign({}, props)));
|
|
142
|
+
},
|
|
143
|
+
Close: function (_a) {
|
|
144
|
+
var props = __rest(_a, []);
|
|
145
|
+
return (0, jsx_runtime_1.jsx)(Close_1.default, __assign({}, props));
|
|
146
|
+
},
|
|
147
|
+
CloseHover: function (_a) {
|
|
148
|
+
var props = __rest(_a, []);
|
|
149
|
+
return (0, jsx_runtime_1.jsx)(CloseHover_1.default, __assign({}, props));
|
|
150
|
+
},
|
|
151
|
+
Danger: function (_a) {
|
|
152
|
+
var props = __rest(_a, []);
|
|
153
|
+
return (0, jsx_runtime_1.jsx)(Danger_1.default, __assign({}, props));
|
|
154
|
+
},
|
|
155
|
+
Discovery: function (_a) {
|
|
156
|
+
var props = __rest(_a, []);
|
|
157
|
+
return (0, jsx_runtime_1.jsx)(Discovery_1.default, __assign({}, props));
|
|
158
|
+
},
|
|
159
|
+
Game: function (_a) {
|
|
160
|
+
var props = __rest(_a, []);
|
|
161
|
+
return (0, jsx_runtime_1.jsx)(Game_1.default, __assign({}, props));
|
|
162
|
+
},
|
|
163
|
+
Heart: function (_a) {
|
|
164
|
+
var props = __rest(_a, []);
|
|
165
|
+
return (0, jsx_runtime_1.jsx)(Heart_1.default, __assign({}, props));
|
|
166
|
+
},
|
|
167
|
+
Hide: function (_a) {
|
|
168
|
+
var props = __rest(_a, []);
|
|
169
|
+
return (0, jsx_runtime_1.jsx)(Hide_1.default, __assign({}, props));
|
|
170
|
+
},
|
|
171
|
+
House: function (_a) {
|
|
172
|
+
var props = __rest(_a, []);
|
|
173
|
+
return (0, jsx_runtime_1.jsx)(House_1.default, __assign({}, props));
|
|
174
|
+
},
|
|
175
|
+
InfoSquare: function (_a) {
|
|
176
|
+
var props = __rest(_a, []);
|
|
177
|
+
return (0, jsx_runtime_1.jsx)(InfoSquare_1.default, __assign({}, props));
|
|
178
|
+
},
|
|
179
|
+
KeyboardClose: function (_a) {
|
|
180
|
+
var props = __rest(_a, []);
|
|
181
|
+
return (0, jsx_runtime_1.jsx)(KeyboardClose_1.default, __assign({}, props));
|
|
182
|
+
},
|
|
183
|
+
Laptop: function (_a) {
|
|
184
|
+
var props = __rest(_a, []);
|
|
185
|
+
return (0, jsx_runtime_1.jsx)(Laptop_1.default, __assign({}, props));
|
|
186
|
+
},
|
|
187
|
+
Show: function (_a) {
|
|
188
|
+
var props = __rest(_a, []);
|
|
189
|
+
return (0, jsx_runtime_1.jsx)(Show_1.default, __assign({}, props));
|
|
190
|
+
},
|
|
191
|
+
SwitchPassive: function (_a) {
|
|
192
|
+
var props = __rest(_a, []);
|
|
193
|
+
return (0, jsx_runtime_1.jsx)(SwitchPassive_1.default, __assign({}, props));
|
|
194
|
+
},
|
|
195
|
+
Watch: function (_a) {
|
|
196
|
+
var props = __rest(_a, []);
|
|
197
|
+
return (0, jsx_runtime_1.jsx)(Watch_1.default, __assign({}, props));
|
|
198
|
+
},
|
|
93
199
|
};
|
|
@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.iconNames = void 0;
|
|
4
4
|
var index_1 = require("./index");
|
|
5
5
|
exports.iconNames = Object.keys(index_1.iconList);
|
|
6
|
-
var IconDefault = { name: "Again" };
|
|
6
|
+
var IconDefault = { name: "Again", stroke: "#000" };
|
|
@@ -44,7 +44,7 @@ var Modal = function (props) {
|
|
|
44
44
|
(props === null || props === void 0 ? void 0 : props.onClose) && props.onClose();
|
|
45
45
|
};
|
|
46
46
|
var onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, onBack = props.onBack, other = __rest(props, ["onPrimaryAction", "onSecondaryAction", "onBack"]);
|
|
47
|
-
return showModal && 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",
|
|
47
|
+
return showModal && 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: props.children }), (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', 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', children: props.secondaryButtonText })] })] })] })) }), document.body);
|
|
48
48
|
};
|
|
49
49
|
exports.default = Modal;
|
|
50
50
|
Modal.defaultProps = {
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
@@ -19,6 +8,6 @@ var Spinner_styled_1 = require("./Spinner.styled");
|
|
|
19
8
|
var SpinnerIcon_1 = __importDefault(require("../../assets/svg/SpinnerIcon"));
|
|
20
9
|
var Spinner = function (props) {
|
|
21
10
|
var width = props.width, height = props.height, variant = props.variant;
|
|
22
|
-
return ((0, jsx_runtime_1.jsx)(Spinner_styled_1.SpinnerStyled,
|
|
11
|
+
return ((0, jsx_runtime_1.jsx)(Spinner_styled_1.SpinnerStyled, { width: width, height: height, variant: variant, children: (0, jsx_runtime_1.jsx)(SpinnerIcon_1.default, { width: width, height: height }) }));
|
|
23
12
|
};
|
|
24
13
|
exports.default = Spinner;
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
@@ -20,8 +9,8 @@ var typography_json_1 = __importDefault(require("./../../jsons/typography.json")
|
|
|
20
9
|
var props_1 = require("./props");
|
|
21
10
|
var Typography = function (props) {
|
|
22
11
|
return typography_json_1.default.map(function (value, key) {
|
|
23
|
-
return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.TypographyStyled, { children: [(0, jsx_runtime_1.jsx)(Typography_styled_1.Thead, { children: (0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Th,
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, { children: [" ", (0, jsx_runtime_1.jsxs)(Typography_styled_1.LeftTitle,
|
|
12
|
+
return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.TypographyStyled, { children: [(0, jsx_runtime_1.jsx)(Typography_styled_1.Thead, { children: (0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Th, { width: 350, className: "headline-black-32-39", children: [" ", value.name, " "] }), props_1.weights.map(function (weight, wKey) { return (0, jsx_runtime_1.jsxs)(Typography_styled_1.Th, { width: 190, className: "headline-semi-bold-32-39", children: [" ", weight.title, " "] }, wKey); })] }) }), (0, jsx_runtime_1.jsx)(Typography_styled_1.Tbody, { children: value.variants.map(function (value2, key2) {
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, { children: [" ", (0, jsx_runtime_1.jsxs)(Typography_styled_1.LeftTitle, { className: "headline-semi-bold-24-29", children: [" ", value2.name, " "] }), " "] }), props_1.weights.map(function (weight, wKey) { return (0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, { className: value2.class.replace("{{weight}}", weight.class), children: [" ", value2.text, " "] }, wKey); })] }, key2));
|
|
25
14
|
}) })] }, key));
|
|
26
15
|
});
|
|
27
16
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "krl-alfred",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
"@storybook/addon-controls": "^7.0.17",
|
|
10
10
|
"@storybook/addon-docs": "^7.0.17",
|
|
11
11
|
"@storybook/addon-knobs": "^7.0.2",
|
|
12
|
+
"@storybook/addon-measure": "^7.0.18",
|
|
13
|
+
"@storybook/addon-outline": "^7.0.18",
|
|
12
14
|
"@storybook/addon-viewport": "^7.0.17",
|
|
13
15
|
"@storybook/preset-scss": "^1.0.3",
|
|
14
16
|
"@testing-library/jest-dom": "^5.16.5",
|