krl-alfred 2.22.1 → 2.23.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.d.ts +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.js +7 -7
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +22 -16
- package/dist/components/DescriptionCard/props.d.ts +13 -3
- package/dist/components/DescriptionCard/props.js +5 -3
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +13 -2
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +12 -6
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js +1 -1
- package/dist/components/RichTextEditor/RichTextEditor.d.ts +4 -0
- package/dist/components/RichTextEditor/RichTextEditor.js +113 -0
- package/dist/components/RichTextEditor/RichTextEditor.styled.d.ts +27 -0
- package/dist/components/RichTextEditor/RichTextEditor.styled.js +22 -0
- package/dist/components/RichTextEditor/extensions/VariableBadgeView.d.ts +4 -0
- package/dist/components/RichTextEditor/extensions/VariableBadgeView.js +25 -0
- package/dist/components/RichTextEditor/extensions/VariableNode.d.ts +14 -0
- package/dist/components/RichTextEditor/extensions/VariableNode.js +75 -0
- package/dist/components/RichTextEditor/index.d.ts +4 -0
- package/dist/components/RichTextEditor/index.js +14 -0
- package/dist/components/RichTextEditor/props.d.ts +38 -0
- package/dist/components/RichTextEditor/props.js +13 -0
- package/dist/components/RichTextEditor/stories/RichTextEditor.stories.d.ts +86 -0
- package/dist/components/RichTextEditor/stories/RichTextEditor.stories.js +101 -0
- package/dist/components/RichTextEditor/utils/sanitize.d.ts +13 -0
- package/dist/components/RichTextEditor/utils/sanitize.js +95 -0
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +1 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.d.ts +5 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +3 -1
- package/package.json +8 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DescriptionCardProps } from "./props";
|
|
3
|
-
declare const DescriptionCard: ({ title, titleSize, 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, subcategoryList,
|
|
3
|
+
declare const DescriptionCard: ({ title, titleSize, headerSize, 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, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
|
|
4
4
|
export default DescriptionCard;
|
|
@@ -24,23 +24,23 @@ var Button_1 = __importDefault(require("./../Button"));
|
|
|
24
24
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
25
25
|
var SubcategoryRow = function (_a) {
|
|
26
26
|
var _b, _c, _d, _e, _f;
|
|
27
|
-
var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth,
|
|
27
|
+
var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryLayout = _a.hasCategoryLayout;
|
|
28
28
|
var hasButton = (_b = item.hasButton) !== null && _b !== void 0 ? _b : true;
|
|
29
29
|
var buttonText = (_c = item.buttonText) !== null && _c !== void 0 ? _c : defaultButtonText;
|
|
30
|
-
var DropdownComponent =
|
|
30
|
+
var DropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
|
|
31
31
|
var isClickable = !!item.onClick;
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ "$
|
|
32
|
+
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 })), (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 }) }))] })) }))] })));
|
|
33
33
|
};
|
|
34
34
|
var DescriptionCard = function (_a) {
|
|
35
|
-
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.
|
|
35
|
+
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.headerDescription, headerDescription = _e === void 0 ? props_1.DescriptionCardDefault.headerDescription : _e, _f = _a.headerButtonText, headerButtonText = _f === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _f, _g = _a.hasHeaderDropdown, hasHeaderDropdown = _g === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _g, _h = _a.hasHeaderBackButton, hasHeaderBackButton = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _h, _j = _a.list, list = _j === void 0 ? props_1.DescriptionCardDefault.list : _j, _k = _a.hasBadge, hasBadge = _k === void 0 ? props_1.DescriptionCardDefault.hasBadge : _k, _l = _a.badgeText, badgeText = _l === void 0 ? props_1.DescriptionCardDefault.badgeText : _l, _m = _a.hasHeader, hasHeader = _m === void 0 ? props_1.DescriptionCardDefault.hasHeader : _m, _o = _a.hasHeaderBackground, hasHeaderBackground = _o === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _o, _p = _a.hasHeaderBorder, hasHeaderBorder = _p === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _p, _q = _a.hasRounded, hasRounded = _q === void 0 ? props_1.DescriptionCardDefault.hasRounded : _q, _r = _a.hasBorder, hasBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasBorder : _r, _s = _a.headerImage, headerImage = _s === void 0 ? props_1.DescriptionCardDefault.headerImage : _s, _t = _a.headerRightContent, headerRightContent = _t === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _t, _u = _a.dropdownList, dropdownList = _u === void 0 ? props_1.DescriptionCardDefault.dropdownList : _u, _v = _a.dropdownWidth, dropdownWidth = _v === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _v, _w = _a.accordionList, accordionList = _w === void 0 ? props_1.DescriptionCardDefault.accordionList : _w, _x = _a.boxSize, boxSize = _x === void 0 ? props_1.DescriptionCardDefault.boxSize : _x, _y = _a.hasHeaderButton, hasHeaderButton = _y === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _y, _z = _a.headerButtonWidth, headerButtonWidth = _z === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _z, _0 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _0 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _0, _1 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _1 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _1, _2 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _2, _3 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _3, _4 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _4, _5 = _a.content, content = _5 === void 0 ? props_1.DescriptionCardDefault.content : _5, _6 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _6 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _6, _7 = _a.middleTitle, middleTitle = _7 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _7, _8 = _a.subcategoryList, subcategoryList = _8 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _8, _9 = _a.hasCategoryLayout, hasCategoryLayout = _9 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _9, _10 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _10 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _10, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _11 = _a.customColumnSpan, customColumnSpan = _11 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _11;
|
|
36
36
|
var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
|
|
37
|
-
var HeaderDropdownComponent =
|
|
37
|
+
var HeaderDropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
|
|
38
38
|
var hasHeaderRightContent = !!headerRightContent;
|
|
39
39
|
var isHeaderClickable = !!onHeaderClick;
|
|
40
|
-
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$
|
|
40
|
+
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 }, { 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) {
|
|
41
41
|
e.stopPropagation();
|
|
42
42
|
onHeaderBack === null || onHeaderBack === void 0 ? void 0 : onHeaderBack();
|
|
43
|
-
}, "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: onHeaderClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize }, { 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 }))] }))] }), middleTitle && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$
|
|
43
|
+
}, "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: onHeaderClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize }, { 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 }))] }))] }), middleTitle && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (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 })), (hasCategoryLayout || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((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) {
|
|
44
44
|
var _a;
|
|
45
45
|
var span = (_a = customColumnSpan[key]) !== null && _a !== void 0 ? _a : 1;
|
|
46
46
|
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));
|
|
@@ -10,29 +10,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.AccordionItemBody = exports.SubcategoryActionWrapper = 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.HeaderBackButtonStyled = exports.HeaderLeftStyled = exports.DescriptionCardHeaderStyled = exports.DescriptionCardStyled = exports.CategoryDropdownWrapper = exports.DropdownWrapper = exports.CategoryContentWrapper = exports.categoryRowGridColumns = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.categoryRowGridColumns = 'minmax(0, 1fr) auto minmax(0, 1fr)';
|
|
13
|
-
exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n padding: 0;\n"], ["\n display: block;\n padding: 0;\n"])));
|
|
13
|
+
exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n padding: 0 1.5rem 1.5rem 1.5rem;\n"], ["\n display: block;\n padding: 0 1.5rem 1.5rem 1.5rem;\n"])));
|
|
14
14
|
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"])));
|
|
15
15
|
exports.CategoryDropdownWrapper = (0, styled_components_1.default)(exports.DropdownWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"], ["\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"])));
|
|
16
|
-
exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n position: relative;\n border-radius: ", ";\n
|
|
17
|
-
exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: ", ";\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-bottom: ", ";\n ", "\n"], ["\n padding: ", ";\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-bottom: ", ";\n ", "\n"])), function (props) {
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n position: relative;\n border-radius: ", ";\n padding: 0;\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 &: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.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
|
|
17
|
+
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: center;\n gap: 1.5rem;\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: center;\n gap: 1.5rem;\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) {
|
|
18
|
+
var hasImage = Boolean(props.$headerImage);
|
|
19
|
+
var reduceBottomPadding = props.$hasHeaderDescription && props.$hasHeaderBorder;
|
|
20
|
+
if (props.$hasHeaderBackground) {
|
|
21
|
+
if (hasImage)
|
|
22
|
+
return '1rem 1.5rem';
|
|
23
|
+
return reduceBottomPadding ? '1.5rem 1.5rem 1rem' : '1.5rem';
|
|
20
24
|
}
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
if (hasImage)
|
|
26
|
+
return '1rem 0';
|
|
27
|
+
return reduceBottomPadding ? '1.5rem 0 1rem' : '1.5rem 0';
|
|
28
|
+
}, function (props) { return props.$headerSize === 'medium' ? '88px' : 'auto'; }, function (props) {
|
|
23
29
|
if (props.$hasTwoColumnHeader)
|
|
24
30
|
return '1fr auto';
|
|
25
|
-
if (props.$
|
|
31
|
+
if (props.$hasCategoryLayout)
|
|
26
32
|
return exports.categoryRowGridColumns;
|
|
27
33
|
if (props.$hasHeaderRightContent && !props.$hasMiddleTitle)
|
|
28
34
|
return 'minmax(0, 1fr) auto';
|
|
29
35
|
if (props.$hasMiddleTitle)
|
|
30
|
-
return '1fr
|
|
36
|
+
return '1fr 1fr auto';
|
|
31
37
|
return '1fr auto';
|
|
32
|
-
}, 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.$
|
|
38
|
+
}, 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 "); });
|
|
33
39
|
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"])));
|
|
34
40
|
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"])));
|
|
35
|
-
exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"])), function (props) { return props.$
|
|
41
|
+
exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"])), function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; });
|
|
36
42
|
exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
37
43
|
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"])));
|
|
38
44
|
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'; });
|
|
@@ -43,8 +49,8 @@ exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14
|
|
|
43
49
|
: 'var(--headline-semi-bold-18-22)'; });
|
|
44
50
|
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"])));
|
|
45
51
|
exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: block;\n margin-left: 1.5rem;\n"], ["\n display: block;\n margin-left: 1.5rem;\n"])));
|
|
46
|
-
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 ? '
|
|
47
|
-
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 &:before{\n content: \"\";\n position: absolute;\n inset:
|
|
52
|
+
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'; });
|
|
53
|
+
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'; });
|
|
48
54
|
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; });
|
|
49
55
|
exports.DisplayTitleStyled = styled_components_1.default.strong(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n"], ["\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n"])));
|
|
50
56
|
exports.DisplayValueStyled = styled_components_1.default.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n"], ["\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n"])));
|
|
@@ -53,12 +59,12 @@ exports.AccordionListWrapper = styled_components_1.default.div(templateObject_23
|
|
|
53
59
|
exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n + div{\n border-top: 1px solid var(--dark-opacity-10);\n margin-top: -1px;\n }\n"], ["\n + div{\n border-top: 1px solid var(--dark-opacity-10);\n margin-top: -1px;\n }\n"])));
|
|
54
60
|
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"; });
|
|
55
61
|
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 cursor: ", ";\n"], ["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
|
|
56
|
-
exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap:
|
|
57
|
-
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: 1.5rem;\n padding: 1rem 1.5rem;\n border-radius:
|
|
62
|
+
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"])));
|
|
63
|
+
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: 1.5rem;\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n transition: all 0.15s ease-in-out;\n cursor: ", ";\n\n &:hover {\n box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n }\n\n ", "\n"], ["\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n transition: all 0.15s ease-in-out;\n cursor: ", ";\n\n &:hover {\n box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n }\n\n ", "\n"])), function (props) { return props.$hasCategoryLayout ? exports.categoryRowGridColumns : '1fr 1fr auto'; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, 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 "); });
|
|
58
64
|
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"])));
|
|
59
65
|
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"])));
|
|
60
66
|
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"])));
|
|
61
67
|
exports.RowMiddleTitleStyled = styled_components_1.default.span(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n"], ["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n"])));
|
|
62
|
-
exports.SubcategoryActionWrapper = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"])), function (props) { return props.$
|
|
68
|
+
exports.SubcategoryActionWrapper = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"])), function (props) { return props.$hasCategoryLayout ? 'flex-end' : 'flex-start'; });
|
|
63
69
|
exports.AccordionItemBody = styled_components_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
64
70
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34;
|
|
@@ -5,17 +5,23 @@ type ICON = typeof iconNames[any];
|
|
|
5
5
|
type BUTTON_SIZE = typeof buttonSizes[number];
|
|
6
6
|
export declare const titleSizes: readonly ["md", "lg"];
|
|
7
7
|
type TITLE_SIZE = typeof titleSizes[number];
|
|
8
|
+
export declare const headerSizes: readonly ["small", "medium"];
|
|
9
|
+
type HEADER_SIZE = typeof headerSizes[number];
|
|
8
10
|
export interface DescriptionCard {
|
|
9
11
|
title?: string;
|
|
10
12
|
titleSize?: TITLE_SIZE;
|
|
13
|
+
headerSize?: HEADER_SIZE;
|
|
11
14
|
headerDescription?: string;
|
|
12
15
|
hasBadge?: boolean;
|
|
16
|
+
badgeText?: string;
|
|
17
|
+
/** Header alanını gösterir/gizler */
|
|
13
18
|
hasHeader?: boolean;
|
|
19
|
+
/** Header arka planı (var / yok) */
|
|
14
20
|
hasHeaderBackground?: boolean;
|
|
21
|
+
/** Header alt border (var / yok) */
|
|
15
22
|
hasHeaderBorder?: boolean;
|
|
16
23
|
hasRounded?: boolean;
|
|
17
24
|
hasBorder?: boolean;
|
|
18
|
-
badgeText?: string;
|
|
19
25
|
hasHeaderDropdown?: boolean;
|
|
20
26
|
hasHeaderBackButton?: boolean;
|
|
21
27
|
headerImage?: React.ReactNode;
|
|
@@ -37,7 +43,8 @@ export interface DescriptionCard {
|
|
|
37
43
|
hasNoContentSidePadding?: boolean;
|
|
38
44
|
middleTitle?: string;
|
|
39
45
|
subcategoryList?: SubcategoryItem[];
|
|
40
|
-
|
|
46
|
+
/** Kategori listesi layout'u (3 kolon grid, hover dropdown vb.) */
|
|
47
|
+
hasCategoryLayout?: boolean;
|
|
41
48
|
/** Header grid'ini `1fr auto` (sol + sağ) olarak sabitler */
|
|
42
49
|
hasTwoColumnHeader?: boolean;
|
|
43
50
|
headerButtonAction?(e: any): void;
|
|
@@ -52,6 +59,7 @@ export interface DescriptionCardStyledProps {
|
|
|
52
59
|
$hasHeader?: boolean;
|
|
53
60
|
$hasHeaderBackground?: boolean;
|
|
54
61
|
$hasHeaderBorder?: boolean;
|
|
62
|
+
$hasHeaderDescription?: boolean;
|
|
55
63
|
$hasRounded?: boolean;
|
|
56
64
|
$hasBorder?: boolean;
|
|
57
65
|
$headerImage?: React.ReactNode;
|
|
@@ -61,11 +69,13 @@ export interface DescriptionCardStyledProps {
|
|
|
61
69
|
$hasHeaderPrimaryButton?: boolean;
|
|
62
70
|
$hasMiddleTitle?: boolean;
|
|
63
71
|
$hasHeaderRightContent?: boolean;
|
|
64
|
-
$
|
|
72
|
+
$hasCategoryLayout?: boolean;
|
|
65
73
|
$hasTwoColumnHeader?: boolean;
|
|
66
74
|
$hasNoContentSidePadding?: boolean;
|
|
67
75
|
$titleSize?: TITLE_SIZE;
|
|
76
|
+
$headerSize?: HEADER_SIZE;
|
|
68
77
|
$isClickable?: boolean;
|
|
78
|
+
$hasAccordion?: boolean;
|
|
69
79
|
$customColumnSpan?: {
|
|
70
80
|
[index: number]: number;
|
|
71
81
|
};
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DescriptionCardDefault = exports.titleSizes = exports.iconNames = void 0;
|
|
3
|
+
exports.DescriptionCardDefault = exports.headerSizes = exports.titleSizes = exports.iconNames = void 0;
|
|
4
4
|
var iconList_1 = require("../Icon/iconList");
|
|
5
5
|
exports.iconNames = Object.keys(iconList_1.iconList);
|
|
6
6
|
exports.titleSizes = ['md', 'lg'];
|
|
7
|
+
exports.headerSizes = ['small', 'medium'];
|
|
7
8
|
exports.DescriptionCardDefault = {
|
|
8
9
|
title: "Header title",
|
|
9
10
|
titleSize: "md",
|
|
11
|
+
headerSize: "small",
|
|
10
12
|
headerDescription: null,
|
|
11
13
|
hasBadge: false,
|
|
12
14
|
hasHeader: true,
|
|
13
15
|
hasHeaderBackground: false,
|
|
14
|
-
hasHeaderBorder:
|
|
16
|
+
hasHeaderBorder: false,
|
|
15
17
|
hasRounded: true,
|
|
16
18
|
hasBorder: true,
|
|
17
19
|
badgeText: null,
|
|
@@ -36,7 +38,7 @@ exports.DescriptionCardDefault = {
|
|
|
36
38
|
hasNoContentSidePadding: false,
|
|
37
39
|
middleTitle: null,
|
|
38
40
|
subcategoryList: [],
|
|
39
|
-
|
|
41
|
+
hasCategoryLayout: false,
|
|
40
42
|
hasTwoColumnHeader: false,
|
|
41
43
|
customColumnSpan: {}
|
|
42
44
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
declare const _default: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ title, titleSize, 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, subcategoryList,
|
|
4
|
+
component: ({ title, titleSize, headerSize, 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, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
argTypes: {
|
|
7
7
|
title: {
|
|
@@ -10,6 +10,10 @@ declare const _default: {
|
|
|
10
10
|
headerDescription: {
|
|
11
11
|
control: string;
|
|
12
12
|
};
|
|
13
|
+
headerSize: {
|
|
14
|
+
control: string;
|
|
15
|
+
options: string[];
|
|
16
|
+
};
|
|
13
17
|
hasBadge: {
|
|
14
18
|
control: string;
|
|
15
19
|
};
|
|
@@ -25,6 +29,10 @@ declare const _default: {
|
|
|
25
29
|
hasHeaderBorder: {
|
|
26
30
|
control: string;
|
|
27
31
|
};
|
|
32
|
+
hasCategoryLayout: {
|
|
33
|
+
control: string;
|
|
34
|
+
description: string;
|
|
35
|
+
};
|
|
28
36
|
hasRounded: {
|
|
29
37
|
control: string;
|
|
30
38
|
};
|
|
@@ -115,9 +123,13 @@ export declare const WithBadge: {
|
|
|
115
123
|
};
|
|
116
124
|
};
|
|
117
125
|
export declare const WithHeaderDescription: {
|
|
126
|
+
name: string;
|
|
118
127
|
args: {
|
|
128
|
+
headerImage: any;
|
|
119
129
|
headerDescription: string;
|
|
120
130
|
hasTwoColumnHeader: boolean;
|
|
131
|
+
hasHeaderBorder: boolean;
|
|
132
|
+
headerSize: string;
|
|
121
133
|
title: string;
|
|
122
134
|
hasBadge: boolean;
|
|
123
135
|
badgeText: string;
|
|
@@ -145,7 +157,6 @@ export declare const WithHeaderDescription: {
|
|
|
145
157
|
component: ({ children }: any) => React.JSX.Element;
|
|
146
158
|
}[];
|
|
147
159
|
dropdownWidth: string;
|
|
148
|
-
headerImage: React.JSX.Element;
|
|
149
160
|
};
|
|
150
161
|
};
|
|
151
162
|
export declare const WithHeaderBackground: {
|
|
@@ -63,11 +63,16 @@ exports.default = {
|
|
|
63
63
|
argTypes: {
|
|
64
64
|
title: { control: 'text' },
|
|
65
65
|
headerDescription: { control: 'text' },
|
|
66
|
+
headerSize: { control: 'select', options: ['small', 'medium'] },
|
|
66
67
|
hasBadge: { control: 'boolean' },
|
|
67
68
|
badgeText: { control: 'text' },
|
|
68
69
|
hasHeader: { control: 'boolean' },
|
|
69
70
|
hasHeaderBackground: { control: 'boolean' },
|
|
70
71
|
hasHeaderBorder: { control: 'boolean' },
|
|
72
|
+
hasCategoryLayout: {
|
|
73
|
+
control: 'boolean',
|
|
74
|
+
description: 'Kategori listesi layout\'u (3 kolon grid, hover dropdown)',
|
|
75
|
+
},
|
|
71
76
|
hasRounded: { control: 'boolean' },
|
|
72
77
|
hasBorder: { control: 'boolean' },
|
|
73
78
|
hasTwoColumnHeader: {
|
|
@@ -87,7 +92,8 @@ exports.WithBadge = {
|
|
|
87
92
|
args: __assign(__assign({}, defaultArgs), { hasBadge: true, badgeText: "Yeni" }),
|
|
88
93
|
};
|
|
89
94
|
exports.WithHeaderDescription = {
|
|
90
|
-
|
|
95
|
+
name: 'Header Description',
|
|
96
|
+
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" }),
|
|
91
97
|
};
|
|
92
98
|
exports.WithHeaderBackground = {
|
|
93
99
|
args: __assign(__assign({}, defaultArgs), { hasHeaderBackground: true }),
|
|
@@ -190,7 +196,7 @@ exports.WithContent = {
|
|
|
190
196
|
headerPrimaryButtonAction: function () { return console.log("edit clicked"); },
|
|
191
197
|
headerImage: null,
|
|
192
198
|
list: [],
|
|
193
|
-
content: subscriptionRuleContent("Çekirdek kahve ürünleri için varsayılan abonelik kuralı. Müşteriler istedikleri zaman aboneliklerini duraklatabilir veya iptal edebilir.", ["5 Ürün kullanıyor", "32 Aktif abone", "Son güncelleme: iki hafta önce"]),
|
|
199
|
+
content: ((0, jsx_runtime_1.jsx)("div", __assign({ style: { padding: "16px 0 24px" } }, { children: subscriptionRuleContent("Çekirdek kahve ürünleri için varsayılan abonelik kuralı. Müşteriler istedikleri zaman aboneliklerini duraklatabilir veya iptal edebilir.", ["5 Ürün kullanıyor", "32 Aktif abone", "Son güncelleme: iki hafta önce"]) }))),
|
|
194
200
|
},
|
|
195
201
|
decorators: [
|
|
196
202
|
function (Story) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))); },
|
|
@@ -208,7 +214,7 @@ var CategoryListHeader = styled_components_1.default.div(templateObject_6 || (te
|
|
|
208
214
|
var CategoryListHeaderCount = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: nowrap;\n"], ["\n white-space: nowrap;\n"])));
|
|
209
215
|
var CategoryListHeaderAction = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n text-align: right;\n"], ["\n display: block;\n text-align: right;\n"])));
|
|
210
216
|
exports.CategoryStructure = {
|
|
211
|
-
render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "900px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00C7ekirdek kahve", middleTitle: "10 \u00FCr\u00FCn",
|
|
217
|
+
render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "900px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00C7ekirdek kahve", middleTitle: "10 \u00FCr\u00FCn", hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: [
|
|
212
218
|
{
|
|
213
219
|
name: "Blend",
|
|
214
220
|
middleTitle: "7 ürün",
|
|
@@ -227,7 +233,7 @@ exports.CategoryStructure = {
|
|
|
227
233
|
buttonAction: function () { return console.log("subcategory edit"); },
|
|
228
234
|
onClick: function () { return console.log("subcategory navigate"); },
|
|
229
235
|
},
|
|
230
|
-
] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00D6\u011F\u00FCt\u00FClm\u00FC\u015F kahve", middleTitle: "7 \u00FCr\u00FCn",
|
|
236
|
+
] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "\u00D6\u011F\u00FCt\u00FClm\u00FC\u015F kahve", middleTitle: "7 \u00FCr\u00FCn", hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: [
|
|
231
237
|
{
|
|
232
238
|
name: "Terra",
|
|
233
239
|
middleTitle: "1 ürün",
|
|
@@ -237,9 +243,9 @@ exports.CategoryStructure = {
|
|
|
237
243
|
buttonAction: function () { return console.log("subcategory edit"); },
|
|
238
244
|
onClick: function () { return console.log("subcategory navigate"); },
|
|
239
245
|
},
|
|
240
|
-
] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Espresso", middleTitle: "1 \u00FCr\u00FCn",
|
|
246
|
+
] }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Espresso", middleTitle: "1 \u00FCr\u00FCn", hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [] })] }))); },
|
|
241
247
|
};
|
|
242
248
|
exports.AddProductToCategory = {
|
|
243
|
-
render: function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Bu kategoriye \u00FCr\u00FCn ekle", titleSize: "lg", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderBackButton: true, onHeaderBack: function () { return console.log("back clicked"); }, list: [] }) }))); },
|
|
249
|
+
render: function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Bu kategoriye \u00FCr\u00FCn ekle", titleSize: "lg", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderBackButton: true, headerSize: "medium", onHeaderBack: function () { return console.log("back clicked"); }, list: [] }) }))); },
|
|
244
250
|
};
|
|
245
251
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -11,5 +11,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
11
11
|
exports.ProductCardHorizontalStyled = void 0;
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var devices_1 = require("../../constants/devices");
|
|
14
|
-
exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n border-radius: 0.5rem;\n max-height:
|
|
14
|
+
exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n border-radius: 0.5rem;\n max-height: ", ";\n }\n }\n\n .title {\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n position: relative;\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n ", ";\n }\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--body-medium-14-17);\n position: relative;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n position: relative;\n\n .price {\n margin-right: 4px;\n font: var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font: var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n ", "\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n border-radius: 0.5rem;\n max-height: ", ";\n }\n }\n\n .title {\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n position: relative;\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n ", ";\n }\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--body-medium-14-17);\n position: relative;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n position: relative;\n\n .price {\n margin-right: 4px;\n font: var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font: var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return !props.$hasLoading && "\n &:hover {\n background: var(--dark-opacity-3);\n }\n "; }, function (props) { return props.$hasLoading ? "none" : "1px solid var(--dark-opacity-5)"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "100%" : "initial"; }, function (props) { return props.$hasLoading ? "100%" : "initial"; }, function (props) { return props.$hasLoading ? '100%' : 'calc(100% - 1rem)'; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "margin-bottom: 0.25rem" : null; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, function (props) { return props.$size === "small" ? "\n .horizontalWrapper {\n .img {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n .title{\n font: var(--caption-semi-bold-12-15);\n }\n .description {\n display: none;\n }\n .priceContent {\n .price {\n font: var(--caption-extra-bold-12-15);\n }\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n " : ""; });
|
|
15
15
|
var templateObject_1;
|
|
@@ -0,0 +1,113 @@
|
|
|
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("react");
|
|
19
|
+
var react_2 = require("@tiptap/react");
|
|
20
|
+
var starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
|
|
21
|
+
var extension_underline_1 = __importDefault(require("@tiptap/extension-underline"));
|
|
22
|
+
var extension_placeholder_1 = __importDefault(require("@tiptap/extension-placeholder"));
|
|
23
|
+
var props_1 = require("./props");
|
|
24
|
+
var RichTextEditor_styled_1 = require("./RichTextEditor.styled");
|
|
25
|
+
var VariableNode_1 = require("./extensions/VariableNode");
|
|
26
|
+
var sanitize_1 = require("./utils/sanitize");
|
|
27
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
28
|
+
var BoldIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5h6.5a3.5 3.5 0 0 1 0 7H7V5Zm0 7h7.5a3.5 3.5 0 0 1 0 7H7v-7Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }))); };
|
|
29
|
+
var ItalicIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10 5h8M6 19h8M14.5 5l-5 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))); };
|
|
30
|
+
var UnderlineIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 5v6a5 5 0 0 0 10 0V5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 19h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
|
|
31
|
+
var StrikeIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.5 8.5C9.2 7 10.5 6 12.2 6c2.1 0 3.8 1.2 3.8 3 0 .8-.3 1.5-.9 2M15.5 15.5c-.7 1.5-2 2.5-3.7 2.5-2.1 0-3.8-1.2-3.8-3 0-.8.3-1.5.9-2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
|
|
32
|
+
var OrderedListIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 6h10M10 12h10M10 18h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 5.5h1.5V9M4 9h3M4.5 14.5c.8 0 1.5.5 1.5 1.25S5.3 17 4.5 17H4v1.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
33
|
+
var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
|
|
34
|
+
var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.RichTextEditorDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.RichTextEditorDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.RichTextEditorDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.RichTextEditorDefault.errorMessage : _g, className = _a.className, id = _a.id, _h = _a.minHeight, minHeight = _h === void 0 ? props_1.RichTextEditorDefault.minHeight : _h;
|
|
35
|
+
var _j = (0, react_1.useState)(false), focused = _j[0], setFocused = _j[1];
|
|
36
|
+
var isControlled = value !== undefined;
|
|
37
|
+
var editor = (0, react_2.useEditor)({
|
|
38
|
+
immediatelyRender: false,
|
|
39
|
+
extensions: [
|
|
40
|
+
starter_kit_1.default.configure({
|
|
41
|
+
heading: false,
|
|
42
|
+
code: false,
|
|
43
|
+
codeBlock: false,
|
|
44
|
+
blockquote: false,
|
|
45
|
+
horizontalRule: false,
|
|
46
|
+
dropcursor: false,
|
|
47
|
+
gapcursor: false,
|
|
48
|
+
hardBreak: {
|
|
49
|
+
keepMarks: true,
|
|
50
|
+
},
|
|
51
|
+
}),
|
|
52
|
+
extension_underline_1.default,
|
|
53
|
+
extension_placeholder_1.default.configure({
|
|
54
|
+
placeholder: placeholder || '',
|
|
55
|
+
}),
|
|
56
|
+
VariableNode_1.VariableNode,
|
|
57
|
+
],
|
|
58
|
+
content: (0, sanitize_1.prepareEditorHtml)(isControlled ? (value || '') : defaultValue),
|
|
59
|
+
editable: !disabled,
|
|
60
|
+
editorProps: {
|
|
61
|
+
attributes: __assign(__assign({}, (id ? { id: id } : {})), { 'aria-invalid': hasError ? 'true' : 'false' }),
|
|
62
|
+
transformPastedHTML: function (html) {
|
|
63
|
+
return (0, sanitize_1.prepareEditorHtml)(html);
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
onUpdate: function (_a) {
|
|
67
|
+
var currentEditor = _a.editor;
|
|
68
|
+
onChange === null || onChange === void 0 ? void 0 : onChange((0, sanitize_1.serializeEditorHtml)(currentEditor.getHTML()));
|
|
69
|
+
},
|
|
70
|
+
onFocus: function () { return setFocused(true); },
|
|
71
|
+
onBlur: function () {
|
|
72
|
+
setFocused(false);
|
|
73
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
(0, react_1.useEffect)(function () {
|
|
77
|
+
if (!editor)
|
|
78
|
+
return;
|
|
79
|
+
editor.setEditable(!disabled);
|
|
80
|
+
}, [disabled, editor]);
|
|
81
|
+
(0, react_1.useEffect)(function () {
|
|
82
|
+
if (!editor || !isControlled)
|
|
83
|
+
return;
|
|
84
|
+
var nextHtml = (0, sanitize_1.serializeEditorHtml)(value || '');
|
|
85
|
+
var currentHtml = (0, sanitize_1.serializeEditorHtml)(editor.getHTML());
|
|
86
|
+
if (nextHtml !== currentHtml) {
|
|
87
|
+
editor.commands.setContent((0, sanitize_1.prepareEditorHtml)(value || ''), { emitUpdate: false });
|
|
88
|
+
}
|
|
89
|
+
}, [value, isControlled, editor]);
|
|
90
|
+
(0, react_1.useImperativeHandle)(ref, function () { return ({
|
|
91
|
+
insertVariable: function (variable) {
|
|
92
|
+
if (!editor || disabled)
|
|
93
|
+
return;
|
|
94
|
+
editor.chain().focus().insertVariable({
|
|
95
|
+
id: variable.id,
|
|
96
|
+
label: variable.label,
|
|
97
|
+
}).run();
|
|
98
|
+
},
|
|
99
|
+
getHTML: function () { return (0, sanitize_1.serializeEditorHtml)((editor === null || editor === void 0 ? void 0 : editor.getHTML()) || ''); },
|
|
100
|
+
getEditor: function () { return editor; },
|
|
101
|
+
focus: function () {
|
|
102
|
+
editor === null || editor === void 0 ? void 0 : editor.chain().focus().run();
|
|
103
|
+
},
|
|
104
|
+
clear: function () {
|
|
105
|
+
editor === null || editor === void 0 ? void 0 : editor.commands.clearContent(true);
|
|
106
|
+
},
|
|
107
|
+
}); }, [editor, disabled]);
|
|
108
|
+
if (!editor)
|
|
109
|
+
return null;
|
|
110
|
+
return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
|
|
111
|
+
});
|
|
112
|
+
RichTextEditor.displayName = 'RichTextEditor';
|
|
113
|
+
exports.default = RichTextEditor;
|