krl-alfred 2.25.0 → 2.25.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.test.js +14 -0
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +52 -0
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +23 -11
- package/package.json +1 -1
|
@@ -59,7 +59,7 @@ exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14
|
|
|
59
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(--surface);\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: var(--bg);\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(--surface);\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: var(--bg);\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"])));
|
|
60
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'; });
|
|
61
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'; });
|
|
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:
|
|
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 z-index: 3;\n overflow: visible;\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(--border);\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 z-index: 3;\n overflow: visible;\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(--border);\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
63
|
exports.ListItemStyled = styled_components_1.default.li(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n word-break: break-word;\n grid-column: span ", ";\n\n &:is(:last-child){\n border-right: 0;\n }\n"], ["\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n word-break: break-word;\n grid-column: span ", ";\n\n &:is(:last-child){\n border-right: 0;\n }\n"])), function (props) { var _a; return (_a = props.$columnSpan) !== null && _a !== void 0 ? _a : 1; });
|
|
64
64
|
exports.DisplayTitleStyled = styled_components_1.default.strong(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: block;\n color: var(--text-soft);\n font: var(--body-semi-bold-14-17);\n"], ["\n display: block;\n color: var(--text-soft);\n font: var(--body-semi-bold-14-17);\n"])));
|
|
65
65
|
exports.DisplayValueStyled = styled_components_1.default.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n display: block;\n margin-top: 0.5rem;\n color: var(--text);\n font: var(--body-semi-bold-14-17);\n"], ["\n display: block;\n margin-top: 0.5rem;\n color: var(--text);\n font: var(--body-semi-bold-14-17);\n"])));
|
|
@@ -80,6 +80,20 @@ describe('DescriptionCard', function () {
|
|
|
80
80
|
boxShadow: '0px 6px 30px 0px var(--box-shadow-color)',
|
|
81
81
|
});
|
|
82
82
|
});
|
|
83
|
+
it('keeps list overlays visible without changing its rounded border', function () {
|
|
84
|
+
renderDescriptionCard({
|
|
85
|
+
hasHeader: false,
|
|
86
|
+
list: [{ title: (0, jsx_runtime_1.jsx)("span", { children: "Tooltip title" }), display: 'Value' }],
|
|
87
|
+
});
|
|
88
|
+
expect(react_1.screen.getByRole('list')).toHaveStyle({
|
|
89
|
+
overflow: 'visible',
|
|
90
|
+
zIndex: '3',
|
|
91
|
+
borderTopLeftRadius: 'inherit',
|
|
92
|
+
borderTopRightRadius: 'inherit',
|
|
93
|
+
borderBottomLeftRadius: 'inherit',
|
|
94
|
+
borderBottomRightRadius: 'inherit',
|
|
95
|
+
});
|
|
96
|
+
});
|
|
83
97
|
it('keeps category layout subcategories borderless so hover can use the card shadow', function () {
|
|
84
98
|
var _a;
|
|
85
99
|
renderDescriptionCard({
|
|
@@ -751,6 +751,58 @@ export declare const MinimalList: {
|
|
|
751
751
|
hasDisableSubcategorySort: boolean;
|
|
752
752
|
};
|
|
753
753
|
};
|
|
754
|
+
export declare const WithTooltipInListTitle: {
|
|
755
|
+
name: string;
|
|
756
|
+
args: {
|
|
757
|
+
hasHeader: boolean;
|
|
758
|
+
headerImage: any;
|
|
759
|
+
boxSize: number;
|
|
760
|
+
customColumnSpan: {};
|
|
761
|
+
list: ({
|
|
762
|
+
display: string;
|
|
763
|
+
title: React.JSX.Element;
|
|
764
|
+
} | {
|
|
765
|
+
display: string;
|
|
766
|
+
title: string;
|
|
767
|
+
})[];
|
|
768
|
+
title: string;
|
|
769
|
+
titleSize: "md";
|
|
770
|
+
headerSize: "small";
|
|
771
|
+
headerAlignItems: "center";
|
|
772
|
+
hasBadge: boolean;
|
|
773
|
+
badgeText: string;
|
|
774
|
+
hasHeaderDropdown: boolean;
|
|
775
|
+
hasHeaderBackButton: boolean;
|
|
776
|
+
headerButtonText: string;
|
|
777
|
+
hasHeaderBackground: boolean;
|
|
778
|
+
hasHeaderBorder: boolean;
|
|
779
|
+
hasRounded: boolean;
|
|
780
|
+
hasBorder: boolean;
|
|
781
|
+
hasShadow: boolean;
|
|
782
|
+
hasHeaderButton: boolean;
|
|
783
|
+
headerButtonWidth: any;
|
|
784
|
+
hasHeaderPrimaryButton: boolean;
|
|
785
|
+
headerPrimaryButtonText: string;
|
|
786
|
+
headerPrimaryButtonIcon: any;
|
|
787
|
+
headerPrimaryButtonSize: "xsmall";
|
|
788
|
+
headerPrimaryButtonAction: () => void;
|
|
789
|
+
headerButtonAction: () => void;
|
|
790
|
+
dropdownList: {
|
|
791
|
+
name: string;
|
|
792
|
+
component: ({ children }: any) => React.JSX.Element;
|
|
793
|
+
}[];
|
|
794
|
+
dropdownWidth: string;
|
|
795
|
+
content: any;
|
|
796
|
+
hasNoContentSidePadding: boolean;
|
|
797
|
+
middleTitle: any;
|
|
798
|
+
status: any;
|
|
799
|
+
subcategoryList: any[];
|
|
800
|
+
hasCategoryLayout: boolean;
|
|
801
|
+
hasTwoColumnHeader: boolean;
|
|
802
|
+
hasDragHandle: boolean;
|
|
803
|
+
hasDisableSubcategorySort: boolean;
|
|
804
|
+
};
|
|
805
|
+
};
|
|
754
806
|
export declare const EmptyList: {
|
|
755
807
|
args: {
|
|
756
808
|
list: any[];
|
|
@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
18
18
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
19
|
};
|
|
20
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
exports.Complete = exports.HeaderAndContentOnly = exports.NoContentSidePadding = exports.WithPrimaryButtonIcon = exports.WithSubcategories = exports.StatusInactive = exports.WithMiddleTitleAndStatus = exports.WithHeaderRightContent = exports.WithHeaderBackButton = exports.HeaderAlignFlexStart = exports.TitleSizeLg = exports.AddProductToCategory = exports.CategoryStructure = exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithHeaderDescription = exports.WithTitleBadgeBetween = exports.WithBadge = exports.Default = void 0;
|
|
21
|
+
exports.Complete = exports.HeaderAndContentOnly = exports.NoContentSidePadding = exports.WithPrimaryButtonIcon = exports.WithSubcategories = exports.StatusInactive = exports.WithMiddleTitleAndStatus = exports.WithHeaderRightContent = exports.WithHeaderBackButton = exports.HeaderAlignFlexStart = exports.TitleSizeLg = exports.AddProductToCategory = exports.CategoryStructure = exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.WithTooltipInListTitle = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithHeaderDescription = exports.WithTitleBadgeBetween = exports.WithBadge = exports.Default = void 0;
|
|
22
22
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
23
23
|
var react_1 = __importDefault(require("react"));
|
|
24
24
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
@@ -33,6 +33,8 @@ var DescriptionCard_styled_1 = require("../DescriptionCard.styled");
|
|
|
33
33
|
var props_1 = require("../props");
|
|
34
34
|
var props_2 = require("../../Button/props");
|
|
35
35
|
var iconList_1 = require("../../Icon/iconList");
|
|
36
|
+
var Tooltip_1 = __importDefault(require("../../Tooltip"));
|
|
37
|
+
var ListTitleWithTooltip = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n"])));
|
|
36
38
|
var defaultHeaderImage = (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" });
|
|
37
39
|
var defaultDropdownList = [
|
|
38
40
|
{ name: "test", component: function (_a) {
|
|
@@ -184,6 +186,16 @@ exports.MinimalList = {
|
|
|
184
186
|
{ display: "Hazırlanıyor", title: "Durum" },
|
|
185
187
|
] }),
|
|
186
188
|
};
|
|
189
|
+
exports.WithTooltipInListTitle = {
|
|
190
|
+
name: 'List Title With Tooltip',
|
|
191
|
+
args: __assign(__assign({}, defaultArgs), { hasHeader: false, headerImage: null, boxSize: 2, customColumnSpan: {}, list: [
|
|
192
|
+
{
|
|
193
|
+
display: "123",
|
|
194
|
+
title: ((0, jsx_runtime_1.jsxs)(ListTitleWithTooltip, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Sipari\u015F ID" }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ position: "topLeft", popupWidth: "220px" }, { children: "Sipari\u015F olu\u015Fturuldu\u011Funda atanan benzersiz numara." }))] })),
|
|
195
|
+
},
|
|
196
|
+
{ display: "Hazırlanıyor", title: "Durum" },
|
|
197
|
+
] }),
|
|
198
|
+
};
|
|
187
199
|
exports.EmptyList = {
|
|
188
200
|
args: __assign(__assign({}, defaultArgs), { list: [] }),
|
|
189
201
|
};
|
|
@@ -236,11 +248,11 @@ exports.HasAccordion = {
|
|
|
236
248
|
}
|
|
237
249
|
], headerImage: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }) }),
|
|
238
250
|
};
|
|
239
|
-
var SubscriptionRuleContentWrapper = styled_components_1.default.div(
|
|
240
|
-
var SubscriptionRuleDescription = styled_components_1.default.p(
|
|
241
|
-
var SubscriptionRuleDivider = styled_components_1.default.div(
|
|
242
|
-
var SubscriptionRuleMeta = styled_components_1.default.div(
|
|
243
|
-
var SubscriptionRuleMetaItem = styled_components_1.default.span(
|
|
251
|
+
var SubscriptionRuleContentWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
252
|
+
var SubscriptionRuleDescription = styled_components_1.default.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0;\n font: var(--body-medium-14-17);\n color: var(--text-muted);\n"], ["\n margin: 0;\n font: var(--body-medium-14-17);\n color: var(--text-muted);\n"])));
|
|
253
|
+
var SubscriptionRuleDivider = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-bottom: 1px solid var(--border);\n margin: 1rem 0;\n"], ["\n border-bottom: 1px solid var(--border);\n margin: 1rem 0;\n"])));
|
|
254
|
+
var SubscriptionRuleMeta = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 1.5rem;\n"], ["\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 1.5rem;\n"])));
|
|
255
|
+
var SubscriptionRuleMetaItem = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font: var(--body-medium-14-17);\n color: var(--text-muted);\n"], ["\n font: var(--body-medium-14-17);\n color: var(--text-muted);\n"])));
|
|
244
256
|
var subscriptionRuleContent = function (description, meta) { return ((0, jsx_runtime_1.jsxs)(SubscriptionRuleContentWrapper, { children: [(0, jsx_runtime_1.jsx)(SubscriptionRuleDescription, { children: description }), (0, jsx_runtime_1.jsx)(SubscriptionRuleDivider, {}), (0, jsx_runtime_1.jsx)(SubscriptionRuleMeta, { children: meta.map(function (item) { return ((0, jsx_runtime_1.jsx)(SubscriptionRuleMetaItem, { children: item }, item)); }) })] })); };
|
|
245
257
|
exports.WithContent = {
|
|
246
258
|
args: {
|
|
@@ -269,10 +281,10 @@ var categoryDropdownList = [
|
|
|
269
281
|
{ name: "Yeni ürün ekle" },
|
|
270
282
|
{ name: "Sil" },
|
|
271
283
|
];
|
|
272
|
-
var CategoryListHeader = styled_components_1.default.div(
|
|
273
|
-
var CategoryListHeaderCount = styled_components_1.default.span(
|
|
274
|
-
var CategoryListHeaderStatus = styled_components_1.default.span(
|
|
275
|
-
var CategoryListHeaderAction = styled_components_1.default.span(
|
|
284
|
+
var CategoryListHeader = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n gap: 3.5rem;\n padding: 0 1.5rem 0.75rem;\n font: var(--body-semi-bold-14-17);\n color: var(--text-soft);\n"], ["\n display: grid;\n grid-template-columns: ", ";\n gap: 3.5rem;\n padding: 0 1.5rem 0.75rem;\n font: var(--body-semi-bold-14-17);\n color: var(--text-soft);\n"])), DescriptionCard_styled_1.categoryRowGridColumns);
|
|
285
|
+
var CategoryListHeaderCount = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n white-space: nowrap;\n"], ["\n white-space: nowrap;\n"])));
|
|
286
|
+
var CategoryListHeaderStatus = styled_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n white-space: nowrap;\n"], ["\n white-space: nowrap;\n"])));
|
|
287
|
+
var CategoryListHeaderAction = styled_components_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n width: 100%;\n"], ["\n display: block;\n width: 100%;\n"])));
|
|
276
288
|
var categoryStructureItems = [
|
|
277
289
|
{
|
|
278
290
|
id: "cekirdek-kahve",
|
|
@@ -408,4 +420,4 @@ exports.HeaderAndContentOnly = {
|
|
|
408
420
|
exports.Complete = {
|
|
409
421
|
args: __assign(__assign({}, defaultArgs), { title: "Komple DescriptionCard", titleSize: "lg", headerSize: "medium", headerAlignItems: "flex-start", headerDescription: "Tüm header özellikleri aktif", hasBadge: true, badgeText: "Yeni", hasHeaderBackground: true, hasHeaderBorder: true, hasHeaderPrimaryButton: true, headerPrimaryButtonText: "Kaydet", headerPrimaryButtonIcon: "Tick", hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "Menü", middleTitle: "Özet", status: { label: "Aktif", variant: "active" }, hasTwoColumnHeader: true }),
|
|
410
422
|
};
|
|
411
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
423
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|