krl-alfred 2.23.10 → 2.23.11
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/RichTextEditor/RichTextEditor.js +3 -3
- package/dist/components/RichTextEditor/RichTextEditor.styled.d.ts +1 -0
- package/dist/components/RichTextEditor/RichTextEditor.styled.js +6 -5
- package/dist/components/RichTextEditor/props.d.ts +2 -0
- package/dist/components/RichTextEditor/props.js +1 -0
- package/dist/components/RichTextEditor/stories/RichTextEditor.stories.d.ts +11 -0
- package/dist/components/RichTextEditor/stories/RichTextEditor.stories.js +10 -1
- package/package.json +1 -1
|
@@ -32,8 +32,8 @@ var StrikeIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({
|
|
|
32
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
33
|
var HeadingIcon = 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: "M6 5v14M18 5v14M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))); };
|
|
34
34
|
var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
|
|
35
|
-
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,
|
|
36
|
-
var
|
|
35
|
+
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, _d = _a.description, description = _d === void 0 ? props_1.RichTextEditorDefault.description : _d, value = _a.value, _e = _a.defaultValue, defaultValue = _e === void 0 ? props_1.RichTextEditorDefault.defaultValue : _e, onChange = _a.onChange, onBlur = _a.onBlur, _f = _a.disabled, disabled = _f === void 0 ? props_1.RichTextEditorDefault.disabled : _f, _g = _a.hasError, hasError = _g === void 0 ? props_1.RichTextEditorDefault.hasError : _g, _h = _a.errorMessage, errorMessage = _h === void 0 ? props_1.RichTextEditorDefault.errorMessage : _h, className = _a.className, id = _a.id, _j = _a.minHeight, minHeight = _j === void 0 ? props_1.RichTextEditorDefault.minHeight : _j;
|
|
36
|
+
var _k = (0, react_1.useState)(false), focused = _k[0], setFocused = _k[1];
|
|
37
37
|
var isControlled = value !== undefined;
|
|
38
38
|
var editor = (0, react_2.useEditor)({
|
|
39
39
|
immediatelyRender: false,
|
|
@@ -110,7 +110,7 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
110
110
|
}); }, [editor, disabled]);
|
|
111
111
|
if (!editor)
|
|
112
112
|
return null;
|
|
113
|
-
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": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (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 }) }))] })));
|
|
113
|
+
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": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (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 }) }))] })), description && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldDescription, { children: description }), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
|
|
114
114
|
});
|
|
115
115
|
RichTextEditor.displayName = 'RichTextEditor';
|
|
116
116
|
exports.default = RichTextEditor;
|
|
@@ -22,6 +22,7 @@ export declare const EditorContentArea: import("styled-components/dist/types").I
|
|
|
22
22
|
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minHeight"> & {
|
|
23
23
|
$minHeight?: string;
|
|
24
24
|
}, never>>> & string;
|
|
25
|
+
export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
|
|
25
26
|
export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
26
27
|
export declare const VariableActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
27
28
|
export declare const VariableChipButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = exports.EditorContentArea = exports.ToolbarDivider = exports.ToolbarButton = exports.Toolbar = exports.EditorShell = exports.FieldLabel = exports.RichTextEditorRoot = void 0;
|
|
10
|
+
exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = exports.FieldDescription = exports.EditorContentArea = exports.ToolbarDivider = exports.ToolbarButton = exports.Toolbar = exports.EditorShell = exports.FieldLabel = exports.RichTextEditorRoot = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.RichTextEditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
|
|
13
13
|
exports.FieldLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0 0 0.5rem;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"], ["\n margin: 0 0 0.5rem;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"])));
|
|
@@ -16,7 +16,8 @@ exports.Toolbar = styled_components_1.default.div(templateObject_4 || (templateO
|
|
|
16
16
|
exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: none;\n border-radius: 0.25rem;\n background: transparent;\n color: ", ";\n font: var(--body-bold-14-17);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n\n &:hover:not(:disabled) {\n background: transparent;\n color: var(--dark);\n }\n\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n background: transparent;\n }\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: none;\n border-radius: 0.25rem;\n background: transparent;\n color: ", ";\n font: var(--body-bold-14-17);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n\n &:hover:not(:disabled) {\n background: transparent;\n color: var(--dark);\n }\n\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n background: transparent;\n }\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n"])), function (props) { return (props.$active ? 'var(--dark)' : 'var(--grey-50)'); });
|
|
17
17
|
exports.ToolbarDivider = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: inline-block;\n width: 1px;\n height: 1.25rem;\n margin: 0;\n background: var(--dark-opacity-10);\n"], ["\n display: inline-block;\n width: 1px;\n height: 1.25rem;\n margin: 0;\n background: var(--dark-opacity-10);\n"])));
|
|
18
18
|
exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n .ProseMirror {\n min-height: ", ";\n padding: 0;\n outline: none;\n color: var(--dark);\n font: var(--body-regular-14-17);\n box-sizing: border-box;\n\n p {\n margin: 0 0 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h2 {\n margin: 0 0 0.75rem;\n color: var(--dark);\n font: var(--headline-semi-bold-18-22);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n ul,\n ol {\n margin: 0 0 0.75rem;\n padding-left: 1.25rem;\n list-style-position: outside;\n }\n\n ul {\n list-style-type: disc;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n li {\n margin-bottom: 0.25rem;\n display: list-item;\n }\n\n strong {\n font-weight: 700;\n }\n\n em {\n font-style: italic;\n }\n\n u {\n text-decoration: underline;\n }\n\n s {\n text-decoration: line-through;\n }\n\n .rte-variable-node {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n margin: 0 0.125rem;\n user-select: none;\n }\n\n /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n .rte-variable {\n display: inline-flex;\n align-items: center;\n margin: 0 0.125rem;\n padding: 0 8px;\n height: 17px;\n line-height: 17px;\n border-radius: 3px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-semi-bold-10-12);\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n }\n\n p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: var(--dark-opacity-50);\n pointer-events: none;\n height: 0;\n font: var(--body-regular-14-17);\n }\n }\n"], ["\n .ProseMirror {\n min-height: ", ";\n padding: 0;\n outline: none;\n color: var(--dark);\n font: var(--body-regular-14-17);\n box-sizing: border-box;\n\n p {\n margin: 0 0 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h2 {\n margin: 0 0 0.75rem;\n color: var(--dark);\n font: var(--headline-semi-bold-18-22);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n ul,\n ol {\n margin: 0 0 0.75rem;\n padding-left: 1.25rem;\n list-style-position: outside;\n }\n\n ul {\n list-style-type: disc;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n li {\n margin-bottom: 0.25rem;\n display: list-item;\n }\n\n strong {\n font-weight: 700;\n }\n\n em {\n font-style: italic;\n }\n\n u {\n text-decoration: underline;\n }\n\n s {\n text-decoration: line-through;\n }\n\n .rte-variable-node {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n margin: 0 0.125rem;\n user-select: none;\n }\n\n /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n .rte-variable {\n display: inline-flex;\n align-items: center;\n margin: 0 0.125rem;\n padding: 0 8px;\n height: 17px;\n line-height: 17px;\n border-radius: 3px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-semi-bold-10-12);\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n }\n\n p.is-editor-empty:first-child::before {\n content: attr(data-placeholder);\n float: left;\n color: var(--dark-opacity-50);\n pointer-events: none;\n height: 0;\n font: var(--body-regular-14-17);\n }\n }\n"])), function (props) { return props.$minHeight || '200px'; });
|
|
19
|
-
exports.
|
|
20
|
-
exports.
|
|
21
|
-
exports.
|
|
22
|
-
var
|
|
19
|
+
exports.FieldDescription = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 0.5rem 0 0;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n"], ["\n margin: 0.5rem 0 0;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n"])));
|
|
20
|
+
exports.ErrorMessage = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 0.5rem;\n color: var(--red);\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n"], ["\n display: flex;\n align-items: center;\n margin-top: 0.5rem;\n color: var(--red);\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n"])));
|
|
21
|
+
exports.VariableActions = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.75rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.75rem;\n"])));
|
|
22
|
+
exports.VariableChipButton = styled_components_1.default.button(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: 0.375rem 0.75rem;\n border-radius: 0.375rem;\n border: 1px solid var(--primary-opacity-50);\n background: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-bold-12-15);\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease;\n\n &:hover {\n background: var(--primary-opacity-50);\n border-color: var(--primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n padding: 0.375rem 0.75rem;\n border-radius: 0.375rem;\n border: 1px solid var(--primary-opacity-50);\n background: var(--primary-opacity-10);\n color: var(--primary);\n font: var(--caption-bold-12-15);\n cursor: pointer;\n transition: background-color 0.15s ease, border-color 0.15s ease;\n\n &:hover {\n background: var(--primary-opacity-50);\n border-color: var(--primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n"])));
|
|
23
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -6,6 +6,7 @@ export type RichTextVariable = {
|
|
|
6
6
|
export interface RichTextEditorProps {
|
|
7
7
|
label?: string;
|
|
8
8
|
placeholder?: string;
|
|
9
|
+
description?: string;
|
|
9
10
|
value?: string;
|
|
10
11
|
defaultValue?: string;
|
|
11
12
|
onChange?: (html: string) => void;
|
|
@@ -29,6 +30,7 @@ export interface RichTextEditorRef {
|
|
|
29
30
|
export declare const RichTextEditorDefault: {
|
|
30
31
|
label: string;
|
|
31
32
|
placeholder: string;
|
|
33
|
+
description: string;
|
|
32
34
|
defaultValue: string;
|
|
33
35
|
disabled: boolean;
|
|
34
36
|
hasError: boolean;
|
|
@@ -11,6 +11,9 @@ declare const _default: {
|
|
|
11
11
|
placeholder: {
|
|
12
12
|
control: string;
|
|
13
13
|
};
|
|
14
|
+
description: {
|
|
15
|
+
control: string;
|
|
16
|
+
};
|
|
14
17
|
disabled: {
|
|
15
18
|
control: string;
|
|
16
19
|
};
|
|
@@ -48,6 +51,14 @@ export declare const Default: {
|
|
|
48
51
|
minHeight: string;
|
|
49
52
|
};
|
|
50
53
|
};
|
|
54
|
+
export declare const WithDescription: {
|
|
55
|
+
args: {
|
|
56
|
+
label: string;
|
|
57
|
+
placeholder: string;
|
|
58
|
+
description: string;
|
|
59
|
+
minHeight: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
51
62
|
export declare const WithSampleContent: {
|
|
52
63
|
name: string;
|
|
53
64
|
args: {
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.Default = void 0;
|
|
17
|
+
exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.WithDescription = exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var react_1 = require("react");
|
|
20
20
|
var RichTextEditor_1 = __importDefault(require("../RichTextEditor"));
|
|
@@ -32,6 +32,7 @@ exports.default = {
|
|
|
32
32
|
argTypes: {
|
|
33
33
|
label: { control: 'text' },
|
|
34
34
|
placeholder: { control: 'text' },
|
|
35
|
+
description: { control: 'text' },
|
|
35
36
|
disabled: { control: 'boolean' },
|
|
36
37
|
hasError: { control: 'boolean' },
|
|
37
38
|
errorMessage: { control: 'text' },
|
|
@@ -50,6 +51,14 @@ exports.Default = {
|
|
|
50
51
|
minHeight: '220px',
|
|
51
52
|
},
|
|
52
53
|
};
|
|
54
|
+
exports.WithDescription = {
|
|
55
|
+
args: {
|
|
56
|
+
label: 'Mail metni',
|
|
57
|
+
placeholder: 'Metin yaz…',
|
|
58
|
+
description: 'Bu metin, gönderilen e-postalarda ürün kartının altında görünür.',
|
|
59
|
+
minHeight: '220px',
|
|
60
|
+
},
|
|
61
|
+
};
|
|
53
62
|
exports.WithSampleContent = {
|
|
54
63
|
name: 'Örnek içerik + değişken chip’leri',
|
|
55
64
|
args: {
|