krl-alfred 2.23.24 → 2.23.26
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/DescriptionCard/DescriptionCard.d.ts +2 -2
- package/dist/components/DescriptionCard/DescriptionCard.js +63 -8
- package/dist/components/DescriptionCard/DescriptionCard.styled.d.ts +1 -11
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +16 -10
- package/dist/components/DescriptionCard/DescriptionCard.test.js +100 -0
- package/dist/components/DescriptionCard/SortableDescriptionCard.d.ts +6 -0
- package/dist/components/DescriptionCard/SortableDescriptionCard.js +42 -0
- package/dist/components/DescriptionCard/index.d.ts +1 -0
- package/dist/components/DescriptionCard/index.js +3 -1
- package/dist/components/DescriptionCard/props.d.ts +11 -0
- package/dist/components/DescriptionCard/props.js +4 -0
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +65 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +99 -33
- package/dist/components/DescriptionCard/utils/getReorderIndexes.d.ts +5 -0
- package/dist/components/DescriptionCard/utils/getReorderIndexes.js +13 -0
- package/dist/components/DescriptionCard/utils/useSortableSensors.d.ts +1 -0
- package/dist/components/DescriptionCard/utils/useSortableSensors.js +9 -0
- package/dist/components/Icon/iconList/Drag.d.ts +3 -0
- package/dist/components/Icon/iconList/Drag.js +40 -0
- package/dist/components/Icon/iconList/DragMini.d.ts +3 -0
- package/dist/components/Icon/iconList/DragMini.js +40 -0
- package/dist/components/Icon/iconList/index.d.ts +9 -1
- package/dist/components/Icon/iconList/index.js +17 -5
- package/dist/components/Input/Input.styled.js +1 -1
- package/dist/components/Tag/Tag.d.ts +1 -1
- package/dist/components/Tag/Tag.js +6 -2
- package/dist/components/Tag/Tag.styled.d.ts +5 -2
- package/dist/components/Tag/Tag.styled.js +7 -6
- package/dist/components/Tag/Tag.test.d.ts +1 -0
- package/dist/components/Tag/Tag.test.js +152 -0
- package/dist/components/Tag/props.d.ts +7 -0
- package/dist/components/Tag/props.js +2 -0
- package/dist/components/Tag/stories/Tag.stories.d.ts +29 -0
- package/dist/components/Tag/stories/Tag.stories.js +37 -2
- package/package.json +5 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { DescriptionCardProps } from "./props";
|
|
3
|
-
declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) =>
|
|
3
|
+
declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, hasShadow, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, hasDragHandle, dragHandleProps, headerButtonAction, onHeaderBack, onHeaderClick, onSubcategoryReorder, customColumnSpan }: DescriptionCardProps) => React.JSX.Element;
|
|
4
4
|
export default DescriptionCard;
|
|
@@ -10,11 +10,26 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
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
|
+
};
|
|
13
24
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
26
|
};
|
|
16
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
29
|
+
var core_1 = require("@dnd-kit/core");
|
|
30
|
+
var modifiers_1 = require("@dnd-kit/modifiers");
|
|
31
|
+
var sortable_1 = require("@dnd-kit/sortable");
|
|
32
|
+
var utilities_1 = require("@dnd-kit/utilities");
|
|
18
33
|
var props_1 = require("./props");
|
|
19
34
|
var DescriptionCard_styled_1 = require("./DescriptionCard.styled");
|
|
20
35
|
var Badges_1 = __importDefault(require("../Badges"));
|
|
@@ -22,34 +37,74 @@ var OptionMenu_1 = __importDefault(require("../OptionMenu"));
|
|
|
22
37
|
var AccordionItem_1 = __importDefault(require("./AccordionItem"));
|
|
23
38
|
var Button_1 = __importDefault(require("./../Button"));
|
|
24
39
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
40
|
+
var useSortableSensors_1 = require("./utils/useSortableSensors");
|
|
41
|
+
var getReorderIndexes_1 = require("./utils/getReorderIndexes");
|
|
42
|
+
var getSubcategoryId = function (item, index) { var _a; return (_a = item.id) !== null && _a !== void 0 ? _a : "subcategory-".concat(index); };
|
|
43
|
+
var DragHandle = function (_a) {
|
|
44
|
+
var dragHandleProps = _a.dragHandleProps;
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DragHandleStyled, __assign({ type: "button", "aria-label": "S\u00FCr\u00FCkle" }, dragHandleProps, { onClick: function (e) {
|
|
46
|
+
var _a;
|
|
47
|
+
e.stopPropagation();
|
|
48
|
+
(_a = dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.onClick) === null || _a === void 0 ? void 0 : _a.call(dragHandleProps, e);
|
|
49
|
+
} }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Drag", width: "16", height: "16" }) })));
|
|
50
|
+
};
|
|
25
51
|
var CategoryStatusCell = function (_a) {
|
|
26
52
|
var status = _a.status;
|
|
27
53
|
if (!(status === null || status === void 0 ? void 0 : status.label))
|
|
28
54
|
return (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.StatusWrapperStyled, {});
|
|
29
55
|
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.StatusWrapperStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.StatusDotStyled, { "$statusVariant": status.variant || 'active' }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.StatusLabelStyled, { children: status.label })] }));
|
|
30
56
|
};
|
|
31
|
-
var
|
|
57
|
+
var SubcategoryRowContent = function (_a) {
|
|
32
58
|
var _b, _c, _d, _e, _f;
|
|
33
|
-
var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryLayout = _a.hasCategoryLayout;
|
|
59
|
+
var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryLayout = _a.hasCategoryLayout, hasDragHandle = _a.hasDragHandle, dragHandleProps = _a.dragHandleProps, setNodeRef = _a.setNodeRef, style = _a.style, isDragging = _a.isDragging;
|
|
34
60
|
var hasButton = (_b = item.hasButton) !== null && _b !== void 0 ? _b : true;
|
|
35
61
|
var buttonText = (_c = item.buttonText) !== null && _c !== void 0 ? _c : defaultButtonText;
|
|
36
|
-
var DropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
|
|
37
62
|
var isClickable = !!item.onClick;
|
|
38
|
-
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (hasCategoryLayout || item.status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: item.status })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(
|
|
63
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ ref: setNodeRef, style: style, "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, "$isDragging": isDragging, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [hasDragHandle && (0, jsx_runtime_1.jsx)(DragHandle, { dragHandleProps: dragHandleProps }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (hasCategoryLayout || item.status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: item.status })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
|
|
64
|
+
};
|
|
65
|
+
var SortableSubcategoryRow = function (_a) {
|
|
66
|
+
var id = _a.id, rowProps = __rest(_a, ["id"]);
|
|
67
|
+
var _b = (0, sortable_1.useSortable)({ id: id }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition, isDragging = _b.isDragging;
|
|
68
|
+
return ((0, jsx_runtime_1.jsx)(SubcategoryRowContent, __assign({}, rowProps, { setNodeRef: setNodeRef, isDragging: isDragging, style: {
|
|
69
|
+
transform: utilities_1.CSS.Transform.toString(transform),
|
|
70
|
+
transition: transition,
|
|
71
|
+
}, dragHandleProps: __assign(__assign({}, attributes), listeners) })));
|
|
39
72
|
};
|
|
40
73
|
var DescriptionCard = function (_a) {
|
|
41
|
-
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasTitleBadgeBetween, hasTitleBadgeBetween = _o === void 0 ? props_1.DescriptionCardDefault.hasTitleBadgeBetween : _o, _p = _a.hasHeader, hasHeader = _p === void 0 ? props_1.DescriptionCardDefault.hasHeader : _p, _q = _a.hasHeaderBackground, hasHeaderBackground = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _q, _r = _a.hasHeaderBorder, hasHeaderBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _r, _s = _a.hasRounded, hasRounded = _s === void 0 ? props_1.DescriptionCardDefault.hasRounded : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.DescriptionCardDefault.hasBorder : _t, _u = _a.
|
|
74
|
+
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasTitleBadgeBetween, hasTitleBadgeBetween = _o === void 0 ? props_1.DescriptionCardDefault.hasTitleBadgeBetween : _o, _p = _a.hasHeader, hasHeader = _p === void 0 ? props_1.DescriptionCardDefault.hasHeader : _p, _q = _a.hasHeaderBackground, hasHeaderBackground = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _q, _r = _a.hasHeaderBorder, hasHeaderBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _r, _s = _a.hasRounded, hasRounded = _s === void 0 ? props_1.DescriptionCardDefault.hasRounded : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.DescriptionCardDefault.hasBorder : _t, _u = _a.hasShadow, hasShadow = _u === void 0 ? props_1.DescriptionCardDefault.hasShadow : _u, _v = _a.headerImage, headerImage = _v === void 0 ? props_1.DescriptionCardDefault.headerImage : _v, _w = _a.headerRightContent, headerRightContent = _w === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _w, _x = _a.dropdownList, dropdownList = _x === void 0 ? props_1.DescriptionCardDefault.dropdownList : _x, _y = _a.dropdownWidth, dropdownWidth = _y === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _y, _z = _a.accordionList, accordionList = _z === void 0 ? props_1.DescriptionCardDefault.accordionList : _z, _0 = _a.boxSize, boxSize = _0 === void 0 ? props_1.DescriptionCardDefault.boxSize : _0, _1 = _a.hasHeaderButton, hasHeaderButton = _1 === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _1, _2 = _a.headerButtonWidth, headerButtonWidth = _2 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _2, _3 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _3 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _3, _4 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _4, _5 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _5, _6 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _6 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _6, _7 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _7 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _7, _8 = _a.content, content = _8 === void 0 ? props_1.DescriptionCardDefault.content : _8, _9 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _9 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _9, _10 = _a.middleTitle, middleTitle = _10 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _10, _11 = _a.status, status = _11 === void 0 ? props_1.DescriptionCardDefault.status : _11, _12 = _a.subcategoryList, subcategoryList = _12 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _12, _13 = _a.hasCategoryLayout, hasCategoryLayout = _13 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _13, _14 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _14 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _14, _15 = _a.hasDragHandle, hasDragHandle = _15 === void 0 ? props_1.DescriptionCardDefault.hasDragHandle : _15, _16 = _a.dragHandleProps, dragHandleProps = _16 === void 0 ? props_1.DescriptionCardDefault.dragHandleProps : _16, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, onSubcategoryReorder = _a.onSubcategoryReorder, _17 = _a.customColumnSpan, customColumnSpan = _17 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _17;
|
|
42
75
|
var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
|
|
43
|
-
var HeaderDropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
|
|
44
76
|
var hasHeaderRightContent = !!headerRightContent;
|
|
45
77
|
var hasHeaderRight = hasHeaderRightContent || hasHeaderPrimaryButton || hasHeaderButton;
|
|
46
78
|
var isHeaderClickable = !!onHeaderClick && !hasHeaderBackButton;
|
|
47
79
|
var handleBackTitleClick = onHeaderClick !== null && onHeaderClick !== void 0 ? onHeaderClick : (onHeaderBack ? function () { onHeaderBack(); } : undefined);
|
|
48
80
|
var isBackTitleClickable = hasHeaderBackButton && !!handleBackTitleClick;
|
|
49
|
-
|
|
81
|
+
var sensors = (0, useSortableSensors_1.useSortableSensors)();
|
|
82
|
+
var subcategoryIds = subcategoryList.map(getSubcategoryId);
|
|
83
|
+
var canSortSubcategories = hasDragHandle && hasSubcategories;
|
|
84
|
+
var handleSubcategoryDragEnd = function (_a) {
|
|
85
|
+
var active = _a.active, over = _a.over;
|
|
86
|
+
var indexes = (0, getReorderIndexes_1.getReorderIndexes)(subcategoryIds, active.id, over === null || over === void 0 ? void 0 : over.id);
|
|
87
|
+
if (!indexes)
|
|
88
|
+
return;
|
|
89
|
+
onSubcategoryReorder === null || onSubcategoryReorder === void 0 ? void 0 : onSubcategoryReorder(indexes.fromIndex, indexes.toIndex);
|
|
90
|
+
};
|
|
91
|
+
var subcategoryRows = subcategoryList.map(function (item, key) {
|
|
92
|
+
var rowProps = {
|
|
93
|
+
item: item,
|
|
94
|
+
defaultButtonText: headerButtonText,
|
|
95
|
+
defaultButtonWidth: headerButtonWidth,
|
|
96
|
+
hasCategoryLayout: hasCategoryLayout,
|
|
97
|
+
hasDragHandle: hasDragHandle,
|
|
98
|
+
};
|
|
99
|
+
if (!canSortSubcategories) {
|
|
100
|
+
return (0, jsx_runtime_1.jsx)(SubcategoryRowContent, __assign({}, rowProps), getSubcategoryId(item, key));
|
|
101
|
+
}
|
|
102
|
+
return ((0, jsx_runtime_1.jsx)(SortableSubcategoryRow, __assign({ id: getSubcategoryId(item, key) }, rowProps), getSubcategoryId(item, key)));
|
|
103
|
+
});
|
|
104
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder, "$hasShadow": hasShadow }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasSubcategories": hasSubcategories, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$hasHeaderRight": hasHeaderRight, "$hasMiddleTitle": (!hasTwoColumnHeader && !!middleTitle) || hasCategoryLayout, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder, "$hasHeaderDescription": Boolean(headerDescription), "$headerSize": headerSize, "$headerAlignItems": headerAlignItems }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [hasDragHandle && ((0, jsx_runtime_1.jsx)(DragHandle, { dragHandleProps: dragHandleProps })), headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
|
|
50
105
|
e.stopPropagation();
|
|
51
106
|
onHeaderBack === null || onHeaderBack === void 0 ? void 0 : onHeaderBack();
|
|
52
|
-
}, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, __assign({ "$hasTitleBadgeBetween": hasTitleBadgeBetween }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize, "$isClickable": isBackTitleClickable, onClick: isBackTitleClickable ? handleBackTitleClick : undefined }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, __assign({ "$hasTitleBadgeBetween": hasTitleBadgeBetween }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) })))] })), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), (hasCategoryLayout || middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: middleTitle }))), (hasCategoryLayout || status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: status })), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasHeaderRightContent": hasHeaderRightContent, "$hasHeaderRight": hasHeaderRight, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(
|
|
107
|
+
}, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, __assign({ "$hasTitleBadgeBetween": hasTitleBadgeBetween }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize, "$isClickable": isBackTitleClickable, onClick: isBackTitleClickable ? handleBackTitleClick : undefined }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, __assign({ "$hasTitleBadgeBetween": hasTitleBadgeBetween }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) })))] })), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), (hasCategoryLayout || middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: middleTitle }))), (hasCategoryLayout || status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: status })), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasHeaderRightContent": hasHeaderRightContent, "$hasHeaderRight": hasHeaderRight, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), content && (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ContentWrapper, __assign({ "$hasNoContentSidePadding": hasNoContentSidePadding }, { children: content })), hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout }, { children: canSortSubcategories ? ((0, jsx_runtime_1.jsx)(core_1.DndContext, __assign({ sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToVerticalAxis, modifiers_1.restrictToParentElement], onDragEnd: handleSubcategoryDragEnd }, { children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, __assign({ items: subcategoryIds, strategy: sortable_1.verticalListSortingStrategy }, { children: subcategoryRows })) }))) : subcategoryRows })) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize, "$hasHeader": hasHeader, "$hasAccordion": (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 }, { children: list.map(function (listItem, key) {
|
|
53
108
|
var _a;
|
|
54
109
|
var span = (_a = customColumnSpan[key]) !== null && _a !== void 0 ? _a : 1;
|
|
55
110
|
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.ListItemStyled, __assign({ "$columnSpan": span }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayTitleStyled, { children: listItem.title }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayValueStyled, { children: listItem.display || "-" })] }), key));
|
|
@@ -4,21 +4,11 @@ export declare const categoryRowGridColumns = "minmax(0, 1fr) 6.5rem 9.5rem 130p
|
|
|
4
4
|
export declare const subcategoryRowGridColumns = "minmax(0, 1fr) 6.5rem 130px 130px";
|
|
5
5
|
export declare const CategoryContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
6
6
|
export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
7
|
-
export declare const CategoryDropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>, "as" | "forwardedAs"> & {
|
|
8
|
-
as?: import("styled-components").WebTarget;
|
|
9
|
-
forwardedAs?: import("styled-components").WebTarget;
|
|
10
|
-
}, "ref"> & {
|
|
11
|
-
ref?: import("react").Ref<HTMLDivElement>;
|
|
12
|
-
}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>, "as" | "forwardedAs"> & {
|
|
13
|
-
as?: import("styled-components").WebTarget;
|
|
14
|
-
forwardedAs?: import("styled-components").WebTarget;
|
|
15
|
-
}, "ref"> & {
|
|
16
|
-
ref?: import("react").Ref<HTMLDivElement>;
|
|
17
|
-
}, never>>> & string;
|
|
18
7
|
export declare const DescriptionCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
19
8
|
export declare const DescriptionCardHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
20
9
|
export declare const HeaderLeftStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
21
10
|
export declare const HeaderBackButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
11
|
+
export declare const DragHandleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
22
12
|
export declare const HeaderRightStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
23
13
|
export declare const HeaderActionWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
24
14
|
export declare const HeaderRightContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
@@ -7,17 +7,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.AccordionItemBody = exports.SubcategoryActionWrapper = exports.StatusLabelStyled = exports.StatusDotStyled = exports.StatusWrapperStyled = exports.RowMiddleTitleStyled = exports.SubcategoryNameStyled = exports.SubcategoryIconWrapper = exports.SubcategoryNameWrapper = exports.SubcategoryRowStyled = exports.SubcategoryListWrapper = exports.HeaderMiddleTitleStyled = exports.AccordionItemHeader = exports.AccordionItemWrapper = exports.AccordionListWrapper = exports.SubMenu = exports.DisplayValueStyled = exports.DisplayTitleStyled = exports.ListItemStyled = exports.ListStyled = exports.ContentWrapper = exports.BadgeWrapper = exports.HeaderImageWrapperStyled = exports.HeaderTitleStyled = exports.HeaderTitleDescriptionStyled = exports.HeaderTitleTopStyled = exports.HeaderTitleWrapperStyled = exports.HeaderRightContentStyled = exports.HeaderActionWrapperStyled = exports.HeaderRightStyled = exports.
|
|
10
|
+
exports.AccordionItemBody = exports.SubcategoryActionWrapper = exports.StatusLabelStyled = exports.StatusDotStyled = exports.StatusWrapperStyled = exports.RowMiddleTitleStyled = exports.SubcategoryNameStyled = exports.SubcategoryIconWrapper = exports.SubcategoryNameWrapper = exports.SubcategoryRowStyled = exports.SubcategoryListWrapper = exports.HeaderMiddleTitleStyled = exports.AccordionItemHeader = exports.AccordionItemWrapper = exports.AccordionListWrapper = exports.SubMenu = exports.DisplayValueStyled = exports.DisplayTitleStyled = exports.ListItemStyled = exports.ListStyled = exports.ContentWrapper = exports.BadgeWrapper = exports.HeaderImageWrapperStyled = exports.HeaderTitleStyled = exports.HeaderTitleDescriptionStyled = exports.HeaderTitleTopStyled = exports.HeaderTitleWrapperStyled = exports.HeaderRightContentStyled = exports.HeaderActionWrapperStyled = exports.HeaderRightStyled = exports.DragHandleStyled = exports.HeaderBackButtonStyled = exports.HeaderLeftStyled = exports.DescriptionCardHeaderStyled = exports.DescriptionCardStyled = exports.DropdownWrapper = exports.CategoryContentWrapper = exports.subcategoryRowGridColumns = exports.categoryRowGridColumns = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.categoryRowGridColumns = 'minmax(0, 1fr) 6.5rem 9.5rem 130px';
|
|
13
13
|
exports.subcategoryRowGridColumns = 'minmax(0, 1fr) 6.5rem 130px 130px';
|
|
14
14
|
exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n padding: 0 1.5rem 1.5rem;\n"], ["\n display: block;\n padding: 0 1.5rem 1.5rem;\n"])));
|
|
15
15
|
exports.DropdownWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"], ["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"])));
|
|
16
|
-
exports.
|
|
17
|
-
exports.
|
|
18
|
-
exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: ", ";\n gap: ", ";\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n ", "\n"], ["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: ", ";\n gap: ", ";\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n ", "\n"])), function (props) { return props.$hasHeaderBackground ? '0' : '0 1.5rem'; }, function (props) {
|
|
16
|
+
exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n position: relative;\n border-radius: ", ";\n padding: 0;\n box-shadow: ", ";\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: ", ";\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n z-index: 2;\n }\n"], ["\n display: block;\n position: relative;\n border-radius: ", ";\n padding: 0;\n box-shadow: ", ";\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: ", ";\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n z-index: 2;\n }\n"])), function (props) { return props.$hasRounded ? "0.5rem" : "0"; }, function (props) { return props.$hasShadow ? '0px 6px 30px 0px var(--box-shadow-color)' : 'none'; }, function (props) { return !props.$hasShadow && props.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
|
|
17
|
+
exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: ", ";\n gap: ", ";\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n"], ["\n margin: ", ";\n padding: ", ";\n min-height: ", ";\n box-sizing: border-box;\n display: grid;\n grid-template-columns: ", ";\n align-items: ", ";\n gap: ", ";\n background-color: ", ";\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n border-bottom: ", ";\n"])), function (props) { return props.$hasHeaderBackground ? '0' : '0 1.5rem'; }, function (props) {
|
|
19
18
|
var hasImage = Boolean(props.$headerImage);
|
|
20
19
|
var reduceBottomPadding = props.$hasHeaderDescription && props.$hasHeaderBorder;
|
|
20
|
+
var horizontal = props.$hasHeaderBackground ? '1.5rem' : '0';
|
|
21
|
+
if (props.$hasCategoryLayout) {
|
|
22
|
+
return props.$hasSubcategories
|
|
23
|
+
? "1.5rem ".concat(horizontal, " 1rem")
|
|
24
|
+
: "1.5rem ".concat(horizontal);
|
|
25
|
+
}
|
|
21
26
|
if (props.$hasHeaderBackground) {
|
|
22
27
|
if (hasImage)
|
|
23
28
|
return '1rem 1.5rem';
|
|
@@ -38,19 +43,20 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
|
|
|
38
43
|
if (hasRight)
|
|
39
44
|
return 'minmax(0, 1fr) auto';
|
|
40
45
|
return '1fr';
|
|
41
|
-
}, function (props) { return props.$headerAlignItems || 'center'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }
|
|
42
|
-
exports.HeaderLeftStyled = styled_components_1.default.div(
|
|
43
|
-
exports.HeaderBackButtonStyled = styled_components_1.default.button(
|
|
46
|
+
}, function (props) { return props.$headerAlignItems || 'center'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; });
|
|
47
|
+
exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n"])));
|
|
48
|
+
exports.HeaderBackButtonStyled = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin: 0 1rem 0 0;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n color: var(--primary);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin: 0 1rem 0 0;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n color: var(--primary);\n"])));
|
|
49
|
+
exports.DragHandleStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n margin-right: 0.75rem;\n padding: 0;\n box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n border-radius: 0.5rem;\n background-color: white;\n cursor: grab;\n color: var(--primary);\n touch-action: none;\n border: none;\n transition: all 0.2s ease-in-out;\n &:active {\n cursor: grabbing;\n background-color: var(--primary);\n color: white;\n }\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n margin-right: 0.75rem;\n padding: 0;\n box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n border-radius: 0.5rem;\n background-color: white;\n cursor: grab;\n color: var(--primary);\n touch-action: none;\n border: none;\n transition: all 0.2s ease-in-out;\n &:active {\n cursor: grabbing;\n background-color: var(--primary);\n color: white;\n }\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n"])));
|
|
44
50
|
exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n justify-content: ", ";\n width: ", ";\n min-width: 0;\n\n > div + div {\n margin-left: 1rem;\n }\n"], ["\n display: ", ";\n align-items: center;\n justify-content: ", ";\n width: ", ";\n min-width: 0;\n\n > div + div {\n margin-left: 1rem;\n }\n"])), function (props) { return props.$hasHeaderRight ? 'flex' : 'none'; }, function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; }, function (props) { return props.$hasCategoryLayout ? '100%' : 'auto'; });
|
|
45
51
|
exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
46
52
|
exports.HeaderRightContentStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n min-width: 0;\n"], ["\n display: block;\n min-width: 0;\n"])));
|
|
47
|
-
exports.HeaderTitleWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n cursor: ", ";\n
|
|
53
|
+
exports.HeaderTitleWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1;\n min-width: 0;\n cursor: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1;\n min-width: 0;\n cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
|
|
48
54
|
exports.HeaderTitleTopStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-width: 0;\n width: ", ";\n justify-content: ", ";\n"], ["\n display: flex;\n align-items: center;\n min-width: 0;\n width: ", ";\n justify-content: ", ";\n"])), function (props) { return props.$hasTitleBadgeBetween ? '100%' : 'auto'; }, function (props) { return props.$hasTitleBadgeBetween ? 'space-between' : 'flex-start'; });
|
|
49
55
|
exports.HeaderTitleDescriptionStyled = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n margin: 1rem 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark);\n"], ["\n margin: 1rem 0 0;\n font: var(--body-regular-14-17);\n color: var(--dark);\n"])));
|
|
50
56
|
exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font: ", ";\n display: inline-block;\n cursor: ", ";\n"], ["\n font: ", ";\n display: inline-block;\n cursor: ", ";\n"])), function (props) { return props.$titleSize === 'lg'
|
|
51
57
|
? 'var(--headline-semi-bold-20-24)'
|
|
52
58
|
: 'var(--headline-semi-bold-18-22)'; }, function (props) { return props.$isClickable ? 'pointer' : 'inherit'; });
|
|
53
|
-
exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"], ["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"])));
|
|
59
|
+
exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n flex-shrink: 0;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"], ["\n display: block;\n flex-shrink: 0;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"])));
|
|
54
60
|
exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: block;\n margin-left: ", ";\n flex-shrink: 0;\n"], ["\n display: block;\n margin-left: ", ";\n flex-shrink: 0;\n"])), function (props) { return props.$hasTitleBadgeBetween ? '0' : '1.5rem'; });
|
|
55
61
|
exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: block;\n padding: ", ";\n"], ["\n display: block;\n padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '0' : '0 1.5rem'; });
|
|
56
62
|
exports.ListStyled = styled_components_1.default.ul(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n overflow: hidden;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n overflow: hidden;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n"])), function (props) { return props.$boxSize; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasHeader ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; }, function (props) { return props.$hasAccordion ? '0' : 'inherit'; });
|
|
@@ -63,7 +69,7 @@ exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_24
|
|
|
63
69
|
exports.AccordionItemHeader = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--primary);\n padding: 1.5rem;\n cursor: pointer;\n border-bottom: ", ";\n strong{\n font: var(--body-bold-14-17);\n display: block;\n color: inherit;\n }\n .icon{\n *{\n display: block;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--primary);\n padding: 1.5rem;\n cursor: pointer;\n border-bottom: ", ";\n strong{\n font: var(--body-bold-14-17);\n display: block;\n color: inherit;\n }\n .icon{\n *{\n display: block;\n }\n }\n"])), function (props) { return props.$show ? "1px solid var(--dark-opacity-10)" : "none"; });
|
|
64
70
|
exports.HeaderMiddleTitleStyled = styled_components_1.default.span(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n min-width: 0;\n cursor: ", ";\n"], ["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n min-width: 0;\n cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
|
|
65
71
|
exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-top: 1rem;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-top: 1rem;\n"])));
|
|
66
|
-
exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: ", ";\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n transition: all 0.
|
|
72
|
+
exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: ", ";\n padding: 1rem 1.5rem;\n border-width: ", ";\n border-style: solid;\n border-color: transparent;\n border-radius: 0.5rem;\n transition: all 0.2s ease;\n cursor: ", ";\n opacity: ", ";\n z-index: ", ";\n\n ", "\n"], ["\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: ", ";\n padding: 1rem 1.5rem;\n border-width: ", ";\n border-style: solid;\n border-color: transparent;\n border-radius: 0.5rem;\n transition: all 0.2s ease;\n cursor: ", ";\n opacity: ", ";\n z-index: ", ";\n\n ", "\n"])), function (props) { return props.$hasCategoryLayout ? exports.subcategoryRowGridColumns : '1fr 1fr auto'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$hasCategoryLayout ? '1px' : '0'; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, function (props) { return props.$isDragging ? 0.6 : 1; }, function (props) { return props.$isDragging ? 2 : 'auto'; }, function (props) { return props.$hasCategoryLayout && "\n &:hover {\n border-color: var(--grey-10);\n }\n "; });
|
|
67
73
|
exports.SubcategoryNameWrapper = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n"], ["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n"])));
|
|
68
74
|
exports.SubcategoryIconWrapper = styled_components_1.default.span(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--dark-opacity-50);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--dark-opacity-50);\n"])));
|
|
69
75
|
exports.SubcategoryNameStyled = styled_components_1.default.span(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font: var(--body-medium-14-17);\n color: var(--dark);\n"], ["\n font: var(--body-medium-14-17);\n color: var(--dark);\n"])));
|
|
@@ -18,6 +18,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var react_1 = require("@testing-library/react");
|
|
19
19
|
var DescriptionCard_1 = __importDefault(require("./DescriptionCard"));
|
|
20
20
|
var props_1 = require("./props");
|
|
21
|
+
var getReorderIndexes_1 = require("./utils/getReorderIndexes");
|
|
21
22
|
var renderDescriptionCard = function (props) {
|
|
22
23
|
var _a, _b;
|
|
23
24
|
if (props === void 0) { props = {}; }
|
|
@@ -51,4 +52,103 @@ describe('DescriptionCard', function () {
|
|
|
51
52
|
expect(react_1.screen.getByText('Product Name')).toBeInTheDocument();
|
|
52
53
|
expect(react_1.screen.getByText('Yeni')).toBeInTheDocument();
|
|
53
54
|
});
|
|
55
|
+
it('renders header image for a main category', function () {
|
|
56
|
+
renderDescriptionCard({
|
|
57
|
+
title: 'Çekirdek kahve',
|
|
58
|
+
hasCategoryLayout: true,
|
|
59
|
+
headerImage: (0, jsx_runtime_1.jsx)("img", { src: "/coffee.jpg", alt: "\u00C7ekirdek kahve" }),
|
|
60
|
+
});
|
|
61
|
+
expect(react_1.screen.getByAltText('Çekirdek kahve')).toBeInTheDocument();
|
|
62
|
+
});
|
|
63
|
+
it('does not shrink header image next to the title', function () {
|
|
64
|
+
renderDescriptionCard({
|
|
65
|
+
title: 'Çekirdek kahve',
|
|
66
|
+
hasCategoryLayout: true,
|
|
67
|
+
headerImage: (0, jsx_runtime_1.jsx)("img", { src: "/coffee.jpg", alt: "\u00C7ekirdek kahve" }),
|
|
68
|
+
});
|
|
69
|
+
expect(react_1.screen.getByAltText('Çekirdek kahve').parentElement).toHaveStyle({
|
|
70
|
+
flexShrink: '0',
|
|
71
|
+
width: '64px',
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
it('applies shadow and drops the outer border when hasShadow is true', function () {
|
|
75
|
+
var container = renderDescriptionCard({
|
|
76
|
+
hasShadow: true,
|
|
77
|
+
hasBorder: true,
|
|
78
|
+
}).container;
|
|
79
|
+
expect(container.firstElementChild).toHaveStyle({
|
|
80
|
+
boxShadow: '0px 6px 30px 0px var(--box-shadow-color)',
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
it('gives category layout subcategories a transparent border that can color on hover', function () {
|
|
84
|
+
var _a;
|
|
85
|
+
renderDescriptionCard({
|
|
86
|
+
hasCategoryLayout: true,
|
|
87
|
+
subcategoryList: [{ name: 'Blend' }],
|
|
88
|
+
});
|
|
89
|
+
var row = (_a = react_1.screen.getByText('Blend').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
90
|
+
expect(row).toHaveStyle({
|
|
91
|
+
display: 'grid',
|
|
92
|
+
borderWidth: '1px',
|
|
93
|
+
borderStyle: 'solid',
|
|
94
|
+
borderColor: 'transparent',
|
|
95
|
+
});
|
|
96
|
+
});
|
|
97
|
+
it('always shows the edit button on main and sub categories', function () {
|
|
98
|
+
renderDescriptionCard({
|
|
99
|
+
title: 'Çekirdek kahve',
|
|
100
|
+
hasCategoryLayout: true,
|
|
101
|
+
hasHeaderButton: true,
|
|
102
|
+
headerButtonText: 'Düzenle',
|
|
103
|
+
subcategoryList: [{ name: 'Blend' }],
|
|
104
|
+
});
|
|
105
|
+
var editButtons = react_1.screen.getAllByRole('button', { name: 'Düzenle' });
|
|
106
|
+
expect(editButtons).toHaveLength(2);
|
|
107
|
+
editButtons.forEach(function (button) { return expect(button).toBeVisible(); });
|
|
108
|
+
});
|
|
109
|
+
it('uses 1.5rem header top padding when a category has subcategories', function () {
|
|
110
|
+
var _a;
|
|
111
|
+
var container = renderDescriptionCard({
|
|
112
|
+
hasCategoryLayout: true,
|
|
113
|
+
headerImage: (0, jsx_runtime_1.jsx)("img", { src: "/coffee.jpg", alt: "\u00C7ekirdek kahve" }),
|
|
114
|
+
subcategoryList: [{ name: 'Blend' }],
|
|
115
|
+
}).container;
|
|
116
|
+
expect((_a = container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild).toHaveStyle({
|
|
117
|
+
paddingTop: '1.5rem',
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
it('uses 1.5rem header vertical padding when a category has no subcategories', function () {
|
|
121
|
+
var _a;
|
|
122
|
+
var container = renderDescriptionCard({
|
|
123
|
+
hasCategoryLayout: true,
|
|
124
|
+
headerImage: (0, jsx_runtime_1.jsx)("img", { src: "/coffee.jpg", alt: "Espresso" }),
|
|
125
|
+
subcategoryList: [],
|
|
126
|
+
}).container;
|
|
127
|
+
expect((_a = container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild).toHaveStyle({
|
|
128
|
+
paddingTop: '1.5rem',
|
|
129
|
+
paddingBottom: '1.5rem',
|
|
130
|
+
});
|
|
131
|
+
});
|
|
132
|
+
it('hides the drag handle by default', function () {
|
|
133
|
+
renderDescriptionCard({ title: 'Çekirdek kahve' });
|
|
134
|
+
expect(react_1.screen.queryByRole('button', { name: 'Sürükle' })).not.toBeInTheDocument();
|
|
135
|
+
});
|
|
136
|
+
it('renders drag handles on the category and its subcategories', function () {
|
|
137
|
+
renderDescriptionCard({
|
|
138
|
+
hasDragHandle: true,
|
|
139
|
+
hasCategoryLayout: true,
|
|
140
|
+
subcategoryList: [{ name: 'Blend' }],
|
|
141
|
+
});
|
|
142
|
+
var handles = react_1.screen.getAllByRole('button', { name: 'Sürükle' });
|
|
143
|
+
expect(handles).toHaveLength(2);
|
|
144
|
+
expect(handles[1]).toHaveAttribute('aria-roledescription', 'sortable');
|
|
145
|
+
});
|
|
146
|
+
it('maps subcategory drag ids to indexes within the same list', function () {
|
|
147
|
+
expect((0, getReorderIndexes_1.getReorderIndexes)(['blend', 'terra'], 'blend', 'terra')).toEqual({
|
|
148
|
+
fromIndex: 0,
|
|
149
|
+
toIndex: 1,
|
|
150
|
+
});
|
|
151
|
+
expect((0, getReorderIndexes_1.getReorderIndexes)(['blend', 'terra'], 'blend', 'blend')).toBeNull();
|
|
152
|
+
expect((0, getReorderIndexes_1.getReorderIndexes)(['blend', 'terra'], 'blend', 'other-card')).toBeNull();
|
|
153
|
+
});
|
|
54
154
|
});
|
|
@@ -0,0 +1,42 @@
|
|
|
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
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
29
|
+
var sortable_1 = require("@dnd-kit/sortable");
|
|
30
|
+
var utilities_1 = require("@dnd-kit/utilities");
|
|
31
|
+
var DescriptionCard_1 = __importDefault(require("./DescriptionCard"));
|
|
32
|
+
var SortableDescriptionCard = function (_a) {
|
|
33
|
+
var id = _a.id, props = __rest(_a, ["id"]);
|
|
34
|
+
var _b = (0, sortable_1.useSortable)({ id: id }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition, isDragging = _b.isDragging;
|
|
35
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: setNodeRef, style: {
|
|
36
|
+
transform: utilities_1.CSS.Transform.toString(transform),
|
|
37
|
+
transition: transition,
|
|
38
|
+
opacity: isDragging ? 0.6 : 1,
|
|
39
|
+
zIndex: isDragging ? 2 : undefined,
|
|
40
|
+
} }, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, __assign({}, props, { hasDragHandle: true, dragHandleProps: __assign(__assign({}, attributes), listeners) })) })));
|
|
41
|
+
};
|
|
42
|
+
exports.default = SortableDescriptionCard;
|
|
@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.default = void 0;
|
|
6
|
+
exports.SortableDescriptionCard = exports.default = void 0;
|
|
7
7
|
var DescriptionCard_1 = require("./DescriptionCard");
|
|
8
8
|
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DescriptionCard_1).default; } });
|
|
9
|
+
var SortableDescriptionCard_1 = require("./SortableDescriptionCard");
|
|
10
|
+
Object.defineProperty(exports, "SortableDescriptionCard", { enumerable: true, get: function () { return __importDefault(SortableDescriptionCard_1).default; } });
|
|
@@ -34,6 +34,8 @@ export interface DescriptionCard {
|
|
|
34
34
|
hasHeaderBorder?: boolean;
|
|
35
35
|
hasRounded?: boolean;
|
|
36
36
|
hasBorder?: boolean;
|
|
37
|
+
/** true ise dış border kalkar, karta gölge uygulanır */
|
|
38
|
+
hasShadow?: boolean;
|
|
37
39
|
hasHeaderDropdown?: boolean;
|
|
38
40
|
hasHeaderBackButton?: boolean;
|
|
39
41
|
headerImage?: React.ReactNode;
|
|
@@ -61,10 +63,15 @@ export interface DescriptionCard {
|
|
|
61
63
|
hasCategoryLayout?: boolean;
|
|
62
64
|
/** Header grid'ini `1fr auto` (sol + sağ) olarak sabitler */
|
|
63
65
|
hasTwoColumnHeader?: boolean;
|
|
66
|
+
/** true ise başlık ve alt kategori satırlarında sürükle tutamacı gösterilir */
|
|
67
|
+
hasDragHandle?: boolean;
|
|
68
|
+
/** Ana kategori tutamacına dnd-kit listener/attribute geçirmek için */
|
|
69
|
+
dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
|
|
64
70
|
headerButtonAction?(e: any): void;
|
|
65
71
|
onHeaderBack?(): void;
|
|
66
72
|
onHeaderClick?(e: React.MouseEvent): void;
|
|
67
73
|
headerPrimaryButtonAction?(e: any): void;
|
|
74
|
+
onSubcategoryReorder?(fromIndex: number, toIndex: number): void;
|
|
68
75
|
customColumnSpan?: {
|
|
69
76
|
[index: number]: number;
|
|
70
77
|
};
|
|
@@ -76,6 +83,7 @@ export interface DescriptionCardStyledProps {
|
|
|
76
83
|
$hasHeaderDescription?: boolean;
|
|
77
84
|
$hasRounded?: boolean;
|
|
78
85
|
$hasBorder?: boolean;
|
|
86
|
+
$hasShadow?: boolean;
|
|
79
87
|
$headerImage?: React.ReactNode;
|
|
80
88
|
$showDropdown?: boolean;
|
|
81
89
|
$boxSize?: number;
|
|
@@ -86,12 +94,14 @@ export interface DescriptionCardStyledProps {
|
|
|
86
94
|
$hasHeaderRight?: boolean;
|
|
87
95
|
$hasTitleBadgeBetween?: boolean;
|
|
88
96
|
$hasCategoryLayout?: boolean;
|
|
97
|
+
$hasSubcategories?: boolean;
|
|
89
98
|
$hasTwoColumnHeader?: boolean;
|
|
90
99
|
$hasNoContentSidePadding?: boolean;
|
|
91
100
|
$titleSize?: TITLE_SIZE;
|
|
92
101
|
$headerSize?: HEADER_SIZE;
|
|
93
102
|
$headerAlignItems?: HEADER_ALIGN_ITEMS;
|
|
94
103
|
$isClickable?: boolean;
|
|
104
|
+
$isDragging?: boolean;
|
|
95
105
|
$hasAccordion?: boolean;
|
|
96
106
|
$statusVariant?: CATEGORY_STATUS_VARIANT;
|
|
97
107
|
$customColumnSpan?: {
|
|
@@ -103,6 +113,7 @@ export interface AccordionList {
|
|
|
103
113
|
list?: any[];
|
|
104
114
|
}
|
|
105
115
|
export interface SubcategoryItem {
|
|
116
|
+
id?: string;
|
|
106
117
|
name: string;
|
|
107
118
|
middleTitle?: string;
|
|
108
119
|
status?: CategoryStatus;
|
|
@@ -20,6 +20,7 @@ exports.DescriptionCardDefault = {
|
|
|
20
20
|
hasHeaderBorder: false,
|
|
21
21
|
hasRounded: true,
|
|
22
22
|
hasBorder: true,
|
|
23
|
+
hasShadow: false,
|
|
23
24
|
badgeText: null,
|
|
24
25
|
hasHeaderDropdown: false,
|
|
25
26
|
hasHeaderBackButton: false,
|
|
@@ -45,5 +46,8 @@ exports.DescriptionCardDefault = {
|
|
|
45
46
|
subcategoryList: [],
|
|
46
47
|
hasCategoryLayout: false,
|
|
47
48
|
hasTwoColumnHeader: false,
|
|
49
|
+
hasDragHandle: false,
|
|
50
|
+
dragHandleProps: null,
|
|
51
|
+
onSubcategoryReorder: null,
|
|
48
52
|
customColumnSpan: {}
|
|
49
53
|
};
|