@appquality/unguess-design-system 2.10.62 → 2.10.65

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# v2.10.65 (Fri Jul 29 2022)
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- feat(editor): Add validation support ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.64 (Wed Jul 27 2022)
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- fix(editor): remove min height when editable is false ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# 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

@@ -1244,13 +1244,24 @@ var Header$1 = styled__default["default"].div(templateObject_1$T || (templateObj
     var theme = _a.theme;
     return theme.palette.grey[300];
 });
-var Title$2 = styled__default["default"](MD)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.primaryHue;
+var Title$2 = styled__default["default"](MD)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var validation = _a.validation, theme = _a.theme;
+    if (validation === "success") {
+        return "color: ".concat(theme.colors.successHue, ";");
+    }
+    else if (validation === "warning") {
+        return "color: ".concat(theme.colors.warningHue, ";");
+    }
+    else if (validation === "error") {
+        return "color: ".concat(theme.palette.dangerHue, ";");
+    }
+    else {
+        return "color: ".concat(theme.colors.primaryHue, ";");
+    }
 });
-var EditorHeader = function (_a) {
-    var title = _a.title;
-    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true }, { children: title || "Write" })) }));
+var EditorHeader = function (props) {
+    var title = props.title, validation = props.validation;
+    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
 };
 var templateObject_1$T, templateObject_2$n;
 
@@ -1268,19 +1279,38 @@ 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 theme = _a.theme;
-    return theme.colors.primaryHue;
-}, 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  ", "\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  ", "\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.borderRadii.md;
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.blue["300"];
+}, function (_a) {
+    var validation = _a.validation, theme = _a.theme;
+    if (validation === "success") {
+        return "border-color: ".concat(theme.colors.successHue, ";");
+    }
+    else if (validation === "warning") {
+        return "border-color: ".concat(theme.colors.warningHue, ";");
+    }
+    else if (validation === "error") {
+        return "border-color: ".concat(theme.colors.dangerHue, ";");
+    }
+    else {
+        return "border-color: ".concat(theme.colors.primaryHue, ";");
+    }
+}, 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      min-height: 0;\n      ";
+});
 /**
  * Editor is a wrapper around TipTap/ProseMirror
  * <br>
@@ -1295,7 +1325,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 +1360,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, validation: props.validation }, { children: [isEditable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle, validation: props.validation }), 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/_types.d.ts

@@ -1,12 +1,20 @@
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import { BubbleMenuProps, Editor, EditorOptions } from "@tiptap/react";
+declare type validationStatus = "success" | "warning" | "error";
 export interface EditorArgs extends Partial<EditorOptions> {
     placeholderOptions?: Partial<PlaceholderOptions>;
     hasInlineMenu?: boolean;
     bubbleOptions?: any;
     headerTitle?: string;
     footerSaveText?: string;
+    /** Applies validation state styling */
+    validation?: validationStatus;
     onSave?: (editor: Editor) => void;
 }
+export interface EditorHeaderArgs {
+    title?: string;
+    validation?: validationStatus;
+}
 export interface FloatingMenuArgs extends Partial<BubbleMenuProps> {
 }
+export {};

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

@@ -1,3 +1,2 @@
-export declare const EditorHeader: ({ title }: {
-    title?: string | undefined;
-}) => JSX.Element;
+import { EditorHeaderArgs } from "./_types";
+export declare const EditorHeader: (props: EditorHeaderArgs) => JSX.Element;

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

@@ -7,5 +7,7 @@ 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>;
+export declare const Validation: 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.65",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-placeholder": "^2.0.0-beta.53",