@appquality/unguess-design-system 2.10.64 → 2.10.67

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# v2.10.67 (Fri Jul 29 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(editor): Add characters count feature ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.66 (Fri Jul 29 2022)
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- chore(theme): update dangerHue shade ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# 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`

package/build/index.js

@@ -22,6 +22,7 @@ var react = require('@tiptap/react');
 var Typography = require('@tiptap/extension-typography');
 var StarterKit = require('@tiptap/starter-kit');
 var Placeholder = require('@tiptap/extension-placeholder');
+var CharacterCount = require('@tiptap/extension-character-count');
 var reactForms = require('@zendeskgarden/react-forms');
 var reactGrid = require('@zendeskgarden/react-grid');
 var reactChrome = require('@zendeskgarden/react-chrome');
@@ -56,6 +57,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
 var Placeholder__default = /*#__PURE__*/_interopDefaultLegacy(Placeholder);
+var CharacterCount__default = /*#__PURE__*/_interopDefaultLegacy(CharacterCount);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -257,7 +259,7 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
         imgMaxHeight: "214px",
     } });
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
+var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
 
 var GlobalStyle = styled.createGlobalStyle(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
 var templateObject_1$1e;
@@ -1244,13 +1246,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,15 +1281,26 @@ 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  ", "\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) {
+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 &&
@@ -1322,6 +1346,7 @@ var Editor = function (_a) {
                     }
                     return "Can you add some further context?";
                 } }, placeholderOptions)),
+            CharacterCount__default["default"],
         ], content: children || "", editorProps: {
             handleKeyDown: function (view, event) {
                 if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
@@ -1338,7 +1363,7 @@ var Editor = function (_a) {
         var editor = _a.editor;
         return setActiveEditor(editor);
     });
-    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 })] })));
+    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

@@ -8,5 +8,6 @@ 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,8 +1,9 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.10.64",
+  "version": "2.10.67",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
+    "@tiptap/extension-character-count": "^2.0.0-beta.31",
     "@tiptap/extension-placeholder": "^2.0.0-beta.53",
     "@tiptap/extension-typography": "^2.0.0-beta.22",
     "@tiptap/react": "^2.0.0-beta.114",