krl-alfred 2.23.20 → 2.23.21
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 +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.js +4 -3
- package/dist/components/DescriptionCard/DescriptionCard.styled.d.ts +3 -3
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +13 -11
- package/dist/components/DescriptionCard/DescriptionCard.test.d.ts +1 -0
- package/dist/components/DescriptionCard/DescriptionCard.test.js +54 -0
- package/dist/components/DescriptionCard/props.d.ts +4 -0
- package/dist/components/DescriptionCard/props.js +1 -0
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +51 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +9 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.d.ts +3 -7
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DescriptionCardProps } from "./props";
|
|
3
|
-
declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, 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) => import("react").JSX.Element;
|
|
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) => import("react").JSX.Element;
|
|
4
4
|
export default DescriptionCard;
|
|
@@ -38,17 +38,18 @@ var SubcategoryRow = function (_a) {
|
|
|
38
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)(DropdownComponent, { 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 }) }))] })) }))] })));
|
|
39
39
|
};
|
|
40
40
|
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.
|
|
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.headerImage, headerImage = _u === void 0 ? props_1.DescriptionCardDefault.headerImage : _u, _v = _a.headerRightContent, headerRightContent = _v === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _v, _w = _a.dropdownList, dropdownList = _w === void 0 ? props_1.DescriptionCardDefault.dropdownList : _w, _x = _a.dropdownWidth, dropdownWidth = _x === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _x, _y = _a.accordionList, accordionList = _y === void 0 ? props_1.DescriptionCardDefault.accordionList : _y, _z = _a.boxSize, boxSize = _z === void 0 ? props_1.DescriptionCardDefault.boxSize : _z, _0 = _a.hasHeaderButton, hasHeaderButton = _0 === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _0, _1 = _a.headerButtonWidth, headerButtonWidth = _1 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _1, _2 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _2 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _2, _3 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _3, _4 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _4, _5 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _5, _6 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _6 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _6, _7 = _a.content, content = _7 === void 0 ? props_1.DescriptionCardDefault.content : _7, _8 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _8 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _8, _9 = _a.middleTitle, middleTitle = _9 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _9, _10 = _a.status, status = _10 === void 0 ? props_1.DescriptionCardDefault.status : _10, _11 = _a.subcategoryList, subcategoryList = _11 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _11, _12 = _a.hasCategoryLayout, hasCategoryLayout = _12 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _12, _13 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _13 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _13, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _14 = _a.customColumnSpan, customColumnSpan = _14 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _14;
|
|
42
42
|
var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
|
|
43
43
|
var HeaderDropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
|
|
44
44
|
var hasHeaderRightContent = !!headerRightContent;
|
|
45
|
+
var hasHeaderRight = hasHeaderRightContent || hasHeaderPrimaryButton || hasHeaderButton;
|
|
45
46
|
var isHeaderClickable = !!onHeaderClick && !hasHeaderBackButton;
|
|
46
47
|
var handleBackTitleClick = onHeaderClick !== null && onHeaderClick !== void 0 ? onHeaderClick : (onHeaderBack ? function () { onHeaderBack(); } : undefined);
|
|
47
48
|
var isBackTitleClickable = hasHeaderBackButton && !!handleBackTitleClick;
|
|
48
|
-
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$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: [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) {
|
|
49
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$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: [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) {
|
|
49
50
|
e.stopPropagation();
|
|
50
51
|
onHeaderBack === null || onHeaderBack === void 0 ? void 0 : onHeaderBack();
|
|
51
|
-
}, "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, { 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, { 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, 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)(HeaderDropdownComponent, { 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: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryLayout: hasCategoryLayout }, key)); }) })) })), 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) {
|
|
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)(HeaderDropdownComponent, { 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: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryLayout: hasCategoryLayout }, key)); }) })) })), 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) {
|
|
52
53
|
var _a;
|
|
53
54
|
var span = (_a = customColumnSpan[key]) !== null && _a !== void 0 ? _a : 1;
|
|
54
55
|
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));
|
|
@@ -16,7 +16,7 @@ export declare const CategoryDropdownWrapper: import("styled-components/dist/typ
|
|
|
16
16
|
}, "ref"> & {
|
|
17
17
|
ref?: import("react").Ref<HTMLDivElement>;
|
|
18
18
|
}, "style"> & {
|
|
19
|
-
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("
|
|
19
|
+
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
|
|
20
20
|
[key: `--${string}`]: string | number;
|
|
21
21
|
});
|
|
22
22
|
}> & string;
|
|
@@ -44,9 +44,9 @@ export declare const HeaderRightContentStyled: import("styled-components/dist/ty
|
|
|
44
44
|
export declare const HeaderTitleWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
45
45
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
|
|
46
46
|
}, DescriptionCardStyledProps>> & string;
|
|
47
|
-
export declare const HeaderTitleTopStyled: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
47
|
+
export declare const HeaderTitleTopStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
48
48
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
|
|
49
|
-
}
|
|
49
|
+
}, DescriptionCardStyledProps>> & string;
|
|
50
50
|
export declare const HeaderTitleDescriptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
|
|
51
51
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
|
|
52
52
|
}> & string;
|
|
@@ -27,29 +27,31 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
|
|
|
27
27
|
return '1rem 0';
|
|
28
28
|
return reduceBottomPadding ? '1.5rem 0 1rem' : '1.5rem 0';
|
|
29
29
|
}, function (props) { return props.$headerSize === 'medium' ? '88px' : 'auto'; }, function (props) {
|
|
30
|
+
var hasRight = props.$hasHeaderRight;
|
|
30
31
|
if (props.$hasTwoColumnHeader)
|
|
31
|
-
return '1fr auto';
|
|
32
|
-
if (props.$hasCategoryLayout)
|
|
33
|
-
return exports.categoryRowGridColumns;
|
|
34
|
-
|
|
35
|
-
return 'minmax(0, 1fr) auto';
|
|
32
|
+
return hasRight ? '1fr auto' : '1fr';
|
|
33
|
+
if (props.$hasCategoryLayout) {
|
|
34
|
+
return hasRight ? exports.categoryRowGridColumns : 'minmax(0, 1fr) 6.5rem 9.5rem';
|
|
35
|
+
}
|
|
36
36
|
if (props.$hasMiddleTitle)
|
|
37
|
-
return '1fr 1fr auto';
|
|
38
|
-
|
|
37
|
+
return hasRight ? '1fr 1fr auto' : '1fr 1fr';
|
|
38
|
+
if (hasRight)
|
|
39
|
+
return 'minmax(0, 1fr) auto';
|
|
40
|
+
return '1fr';
|
|
39
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'; }, function (props) { return props.$hasCategoryLayout && "\n &:hover ".concat(exports.CategoryDropdownWrapper, ",\n ").concat(exports.CategoryDropdownWrapper, ":hover,\n ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n opacity: 1;\n visibility: visible;\n }\n "); });
|
|
40
42
|
exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __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"])));
|
|
41
43
|
exports.HeaderBackButtonStyled = 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 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"])));
|
|
42
|
-
exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display:
|
|
44
|
+
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'; });
|
|
43
45
|
exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
44
46
|
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"])));
|
|
45
|
-
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"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
|
|
46
|
-
exports.HeaderTitleTopStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-width: 0;\n"], ["\n display: flex;\n align-items: center;\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 width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n cursor: ", ";\n width: 100%;\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
|
|
48
|
+
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'; });
|
|
47
49
|
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"])));
|
|
48
50
|
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'
|
|
49
51
|
? 'var(--headline-semi-bold-20-24)'
|
|
50
52
|
: 'var(--headline-semi-bold-18-22)'; }, function (props) { return props.$isClickable ? 'pointer' : 'inherit'; });
|
|
51
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"])));
|
|
52
|
-
exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: block;\n margin-left:
|
|
54
|
+
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'; });
|
|
53
55
|
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'; });
|
|
54
56
|
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'; });
|
|
55
57
|
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(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\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(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\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; });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var react_1 = require("@testing-library/react");
|
|
19
|
+
var DescriptionCard_1 = __importDefault(require("./DescriptionCard"));
|
|
20
|
+
var props_1 = require("./props");
|
|
21
|
+
var renderDescriptionCard = function (props) {
|
|
22
|
+
var _a, _b;
|
|
23
|
+
if (props === void 0) { props = {}; }
|
|
24
|
+
var view = (0, react_1.render)((0, jsx_runtime_1.jsx)(DescriptionCard_1.default, __assign({}, props_1.DescriptionCardDefault, { list: [] }, props)));
|
|
25
|
+
var headerRightSection = (_b = (_a = view.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.lastElementChild;
|
|
26
|
+
return __assign({ headerRightSection: headerRightSection }, view);
|
|
27
|
+
};
|
|
28
|
+
describe('DescriptionCard', function () {
|
|
29
|
+
it('hides header right section when it has no content', function () {
|
|
30
|
+
var headerRightSection = renderDescriptionCard({
|
|
31
|
+
hasHeaderButton: false,
|
|
32
|
+
hasHeaderPrimaryButton: false,
|
|
33
|
+
headerRightContent: null,
|
|
34
|
+
}).headerRightSection;
|
|
35
|
+
expect(headerRightSection).toHaveStyle({ display: 'none' });
|
|
36
|
+
});
|
|
37
|
+
it('shows header right section when header button exists', function () {
|
|
38
|
+
var headerRightSection = renderDescriptionCard({
|
|
39
|
+
hasHeaderButton: true,
|
|
40
|
+
}).headerRightSection;
|
|
41
|
+
expect(headerRightSection).toHaveStyle({ display: 'flex' });
|
|
42
|
+
});
|
|
43
|
+
it('renders title and badge when hasTitleBadgeBetween is true', function () {
|
|
44
|
+
renderDescriptionCard({
|
|
45
|
+
title: 'Product Name',
|
|
46
|
+
hasBadge: true,
|
|
47
|
+
badgeText: 'Yeni',
|
|
48
|
+
hasTitleBadgeBetween: true,
|
|
49
|
+
headerImage: null,
|
|
50
|
+
});
|
|
51
|
+
expect(react_1.screen.getByText('Product Name')).toBeInTheDocument();
|
|
52
|
+
expect(react_1.screen.getByText('Yeni')).toBeInTheDocument();
|
|
53
|
+
});
|
|
54
|
+
});
|
|
@@ -24,6 +24,8 @@ export interface DescriptionCard {
|
|
|
24
24
|
headerDescription?: string;
|
|
25
25
|
hasBadge?: boolean;
|
|
26
26
|
badgeText?: string;
|
|
27
|
+
/** true ise başlık solda, badge sağda space-between hizalanır */
|
|
28
|
+
hasTitleBadgeBetween?: boolean;
|
|
27
29
|
/** Header alanını gösterir/gizler */
|
|
28
30
|
hasHeader?: boolean;
|
|
29
31
|
/** Header arka planı (var / yok) */
|
|
@@ -81,6 +83,8 @@ export interface DescriptionCardStyledProps {
|
|
|
81
83
|
$hasHeaderPrimaryButton?: boolean;
|
|
82
84
|
$hasMiddleTitle?: boolean;
|
|
83
85
|
$hasHeaderRightContent?: boolean;
|
|
86
|
+
$hasHeaderRight?: boolean;
|
|
87
|
+
$hasTitleBadgeBetween?: boolean;
|
|
84
88
|
$hasCategoryLayout?: boolean;
|
|
85
89
|
$hasTwoColumnHeader?: boolean;
|
|
86
90
|
$hasNoContentSidePadding?: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
declare const _default: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, 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 }: import("../props").DescriptionCard) => React.JSX.Element;
|
|
4
|
+
component: ({ 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 }: import("../props").DescriptionCard) => React.JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
argTypes: {
|
|
7
7
|
title: {
|
|
@@ -26,6 +26,10 @@ declare const _default: {
|
|
|
26
26
|
hasBadge: {
|
|
27
27
|
control: string;
|
|
28
28
|
};
|
|
29
|
+
hasTitleBadgeBetween: {
|
|
30
|
+
control: string;
|
|
31
|
+
description: string;
|
|
32
|
+
};
|
|
29
33
|
badgeText: {
|
|
30
34
|
control: string;
|
|
31
35
|
};
|
|
@@ -178,6 +182,52 @@ export declare const WithBadge: {
|
|
|
178
182
|
hasTwoColumnHeader: boolean;
|
|
179
183
|
};
|
|
180
184
|
};
|
|
185
|
+
export declare const WithTitleBadgeBetween: {
|
|
186
|
+
name: string;
|
|
187
|
+
args: {
|
|
188
|
+
headerImage: any;
|
|
189
|
+
list: any[];
|
|
190
|
+
hasBadge: boolean;
|
|
191
|
+
badgeText: string;
|
|
192
|
+
hasTitleBadgeBetween: boolean;
|
|
193
|
+
title: string;
|
|
194
|
+
titleSize: "md";
|
|
195
|
+
headerSize: "small";
|
|
196
|
+
headerAlignItems: "center";
|
|
197
|
+
hasHeaderDropdown: boolean;
|
|
198
|
+
hasHeaderBackButton: boolean;
|
|
199
|
+
headerButtonText: string;
|
|
200
|
+
hasHeader: boolean;
|
|
201
|
+
hasHeaderBackground: boolean;
|
|
202
|
+
hasHeaderBorder: boolean;
|
|
203
|
+
hasRounded: boolean;
|
|
204
|
+
hasBorder: boolean;
|
|
205
|
+
hasHeaderButton: boolean;
|
|
206
|
+
headerButtonWidth: any;
|
|
207
|
+
hasHeaderPrimaryButton: boolean;
|
|
208
|
+
headerPrimaryButtonText: string;
|
|
209
|
+
headerPrimaryButtonIcon: any;
|
|
210
|
+
headerPrimaryButtonSize: "xsmall";
|
|
211
|
+
headerPrimaryButtonAction: () => void;
|
|
212
|
+
headerButtonAction: () => void;
|
|
213
|
+
boxSize: number;
|
|
214
|
+
customColumnSpan: {
|
|
215
|
+
0: number;
|
|
216
|
+
};
|
|
217
|
+
dropdownList: {
|
|
218
|
+
name: string;
|
|
219
|
+
component: ({ children }: any) => React.JSX.Element;
|
|
220
|
+
}[];
|
|
221
|
+
dropdownWidth: string;
|
|
222
|
+
content: any;
|
|
223
|
+
hasNoContentSidePadding: boolean;
|
|
224
|
+
middleTitle: any;
|
|
225
|
+
status: any;
|
|
226
|
+
subcategoryList: any[];
|
|
227
|
+
hasCategoryLayout: boolean;
|
|
228
|
+
hasTwoColumnHeader: boolean;
|
|
229
|
+
};
|
|
230
|
+
};
|
|
181
231
|
export declare const WithHeaderDescription: {
|
|
182
232
|
name: string;
|
|
183
233
|
args: {
|
|
@@ -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.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.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 styled_components_1 = __importDefault(require("styled-components"));
|
|
24
24
|
var DescriptionCard_1 = __importDefault(require("../DescriptionCard"));
|
|
@@ -90,6 +90,10 @@ exports.default = {
|
|
|
90
90
|
description: 'Header dikey hizalama',
|
|
91
91
|
},
|
|
92
92
|
hasBadge: { control: 'boolean' },
|
|
93
|
+
hasTitleBadgeBetween: {
|
|
94
|
+
control: 'boolean',
|
|
95
|
+
description: 'Başlık solda, badge sağda space-between hizalama',
|
|
96
|
+
},
|
|
93
97
|
badgeText: { control: 'text' },
|
|
94
98
|
hasHeader: { control: 'boolean' },
|
|
95
99
|
hasHeaderBackground: { control: 'boolean' },
|
|
@@ -121,6 +125,10 @@ exports.Default = {
|
|
|
121
125
|
exports.WithBadge = {
|
|
122
126
|
args: __assign(__assign({}, defaultArgs), { hasBadge: true, badgeText: "Yeni" }),
|
|
123
127
|
};
|
|
128
|
+
exports.WithTitleBadgeBetween = {
|
|
129
|
+
name: 'Title Badge Between',
|
|
130
|
+
args: __assign(__assign({}, defaultArgs), { headerImage: null, list: [], hasBadge: true, badgeText: "Yeni", hasTitleBadgeBetween: true }),
|
|
131
|
+
};
|
|
124
132
|
exports.WithHeaderDescription = {
|
|
125
133
|
name: 'Header Description',
|
|
126
134
|
args: __assign(__assign({}, defaultArgs), { headerImage: null, headerDescription: "Bu alan başlığın altında gösterilen açıklama metnidir.", hasTwoColumnHeader: true, hasHeaderBorder: true, headerSize: "medium" }),
|
|
@@ -80,15 +80,11 @@ export declare const InsuranceQuantity: import("styled-components/dist/types").I
|
|
|
80
80
|
export declare const InsuranceActions: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
81
81
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
|
|
82
82
|
}> & string;
|
|
83
|
-
export declare const InsuranceType2RadioInput: import("styled-components/dist/types").IStyledComponentBase<"web",
|
|
83
|
+
export declare const InsuranceType2RadioInput: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
|
|
84
84
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
|
|
85
|
-
}, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "
|
|
86
|
-
ref?: import("react").Ref<HTMLInputElement>;
|
|
87
|
-
}>, "type"> & Partial<Pick<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
|
|
85
|
+
}, "type"> & Partial<Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
|
|
88
86
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
|
|
89
|
-
},
|
|
90
|
-
ref?: import("react").Ref<HTMLInputElement>;
|
|
91
|
-
}>, "type">>> & string;
|
|
87
|
+
}, "type">>> & string;
|
|
92
88
|
export declare const InsuranceType2TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
|
|
93
89
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
|
|
94
90
|
}> & string;
|