@appquality/unguess-design-system 2.10.62 → 2.10.63

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.10.63 (Wed Jul 27 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(editor): add read only style ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.62 (Fri Jul 22 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -1268,7 +1268,7 @@ var EditorFooter = function (_a) {
 };
 var templateObject_1$S, templateObject_2$m;
 
-var EditorContainer = styled__default["default"].div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  border: 2px solid ", ";\n  border-radius: ", ";\n  &:focus-within {\n    outline: ", ";\n    outline-style: solid;\n  }\n\n  .ProseMirror {\n    padding: ", ";\n    background-color: #fff;\n    min-height: 100px;\n    outline: none;\n\n    ", "\n  }\n"], ["\n  border: 2px solid ", ";\n  border-radius: ", ";\n  &:focus-within {\n    outline: ", ";\n    outline-style: solid;\n  }\n\n  .ProseMirror {\n    padding: ", ";\n    background-color: #fff;\n    min-height: 100px;\n    outline: none;\n\n    ", "\n  }\n"])), function (_a) {
+var EditorContainer = styled__default["default"].div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  border: 2px solid ", ";\n  border-radius: ", ";\n  &:focus-within {\n    outline: ", ";\n    outline-style: solid;\n  }\n\n  ", "\n\n  .ProseMirror {\n    padding: ", ";\n    background-color: #fff;\n    min-height: 100px;\n    outline: none;\n\n    ", "\n\n    ", "\n  }\n"], ["\n  border: 2px solid ", ";\n  border-radius: ", ";\n  &:focus-within {\n    outline: ", ";\n    outline-style: solid;\n  }\n\n  ", "\n\n  .ProseMirror {\n    padding: ", ";\n    background-color: #fff;\n    min-height: 100px;\n    outline: none;\n\n    ", "\n\n    ", "\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.primaryHue;
 }, function (_a) {
@@ -1277,10 +1277,18 @@ var EditorContainer = styled__default["default"].div(templateObject_1$R || (temp
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.blue["300"];
+}, function (_a) {
+    var editable = _a.editable;
+    return !editable &&
+        "\n      border: none;\n      outline: none;\n      \n    ";
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.md;
-}, editorStyle);
+}, editorStyle, function (_a) {
+    var editable = _a.editable;
+    return !editable &&
+        "\n      background: transparent;\n      border: none;\n      outline: none;\n      padding: 0;\n      ";
+});
 /**
  * Editor is a wrapper around TipTap/ProseMirror
  * <br>
@@ -1295,7 +1303,8 @@ var EditorContainer = styled__default["default"].div(templateObject_1$R || (temp
  */
 var Editor = function (_a) {
     var onSave = _a.onSave, headerTitle = _a.headerTitle, footerSaveText = _a.footerSaveText, placeholderOptions = _a.placeholderOptions, props = __rest(_a, ["onSave", "headerTitle", "footerSaveText", "placeholderOptions"]);
-    var children = props.children, hasInlineMenu = props.hasInlineMenu, bubbleOptions = props.bubbleOptions;
+    var children = props.children, hasInlineMenu = props.hasInlineMenu, bubbleOptions = props.bubbleOptions, editable = props.editable;
+    var isEditable = editable !== undefined ? editable : true;
     var _b = React.useState(), activeEditor = _b[0], setActiveEditor = _b[1];
     var onKeyDown = function (event) {
         if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
@@ -1329,7 +1338,7 @@ var Editor = function (_a) {
         var editor = _a.editor;
         return setActiveEditor(editor);
     });
-    return (jsxRuntime.jsxs(EditorContainer, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: __assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] }));
+    return (jsxRuntime.jsxs(EditorContainer, __assign({ editable: isEditable }, { children: [isEditable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: __assign({}, bubbleOptions) }))] })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), isEditable && jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] })));
 };
 var templateObject_1$R;
 

package/build/stories/editor/index.stories.d.ts

@@ -7,5 +7,6 @@ interface EditorStoryArgs extends EditorArgs {
 export declare const Default: Story<EditorStoryArgs>;
 export declare const Placeholder: Story<EditorStoryArgs>;
 export declare const BubbleMenu: Story<EditorStoryArgs>;
+export declare const ReadOnly: Story<EditorStoryArgs>;
 declare const _default: ComponentMeta<({ onSave, headerTitle, footerSaveText, placeholderOptions, ...props }: import("react").PropsWithChildren<EditorArgs>) => JSX.Element | null>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.10.62",
+  "version": "2.10.63",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-placeholder": "^2.0.0-beta.53",