@pareto-engineering/design-system 4.0.0-alpha.39 → 4.0.0-alpha.41

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.
Files changed (40) hide show
  1. package/dist/cjs/a/People/common/Person/Person.js +4 -4
  2. package/dist/cjs/a/People/styles.scss +10 -4
  3. package/dist/cjs/b/Card/common/Group/Group.js +1 -1
  4. package/dist/cjs/f/fields/EditorInput/EditorInput.js +191 -0
  5. package/dist/cjs/f/fields/EditorInput/common/Toolbar.js +193 -0
  6. package/dist/cjs/f/fields/EditorInput/common/TreeViewPlugin.js +19 -0
  7. package/dist/cjs/f/fields/EditorInput/common/index.js +20 -0
  8. package/dist/cjs/f/fields/EditorInput/index.js +13 -0
  9. package/dist/cjs/f/fields/EditorInput/styles.scss +119 -0
  10. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +1 -1
  11. package/dist/cjs/f/fields/QueryCombobox/styles.scss +4 -1
  12. package/dist/cjs/f/fields/index.js +8 -1
  13. package/dist/es/a/People/common/Person/Person.js +4 -4
  14. package/dist/es/a/People/styles.scss +10 -4
  15. package/dist/es/b/Card/common/Group/Group.js +1 -1
  16. package/dist/es/f/fields/EditorInput/EditorInput.js +186 -0
  17. package/dist/es/f/fields/EditorInput/common/Toolbar.js +182 -0
  18. package/dist/es/f/fields/EditorInput/common/TreeViewPlugin.js +11 -0
  19. package/dist/es/f/fields/EditorInput/common/index.js +2 -0
  20. package/dist/es/f/fields/EditorInput/index.js +2 -0
  21. package/dist/es/f/fields/EditorInput/styles.scss +119 -0
  22. package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +1 -1
  23. package/dist/es/f/fields/QueryCombobox/styles.scss +4 -1
  24. package/dist/es/f/fields/index.js +2 -1
  25. package/package.json +5 -3
  26. package/src/stories/a/People.stories.jsx +20 -0
  27. package/src/stories/f/EditorInput.stories.jsx +88 -0
  28. package/src/ui/a/People/common/Person/Person.jsx +4 -4
  29. package/src/ui/a/People/styles.scss +10 -4
  30. package/src/ui/b/Card/common/Group/Group.jsx +1 -1
  31. package/src/ui/f/fields/EditorInput/EditorInput.jsx +237 -0
  32. package/src/ui/f/fields/EditorInput/common/Toolbar.jsx +254 -0
  33. package/src/ui/f/fields/EditorInput/common/TreeViewPlugin.jsx +16 -0
  34. package/src/ui/f/fields/EditorInput/common/index.jsx +2 -0
  35. package/src/ui/f/fields/EditorInput/index.js +2 -0
  36. package/src/ui/f/fields/EditorInput/styles.scss +119 -0
  37. package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +1 -0
  38. package/src/ui/f/fields/QueryCombobox/styles.scss +4 -1
  39. package/src/ui/f/fields/index.js +1 -0
  40. package/tests/__snapshots__/Storyshots.test.js.snap +703 -4
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ChoicesInput", {
15
15
  return _ChoicesInput.ChoicesInput;
16
16
  }
17
17
  });
18
+ Object.defineProperty(exports, "EditorInput", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _EditorInput.EditorInput;
22
+ }
23
+ });
18
24
  Object.defineProperty(exports, "LinkInput", {
19
25
  enumerable: true,
20
26
  get: function () {
@@ -72,4 +78,5 @@ var _QueryCombobox = require("./QueryCombobox");
72
78
  var _QuerySelect = require("./QuerySelect");
73
79
  var _Checkbox = require("./Checkbox");
74
80
  var _QueryChoices = require("./QueryChoices");
75
- var _LinkInput = require("./LinkInput");
81
+ var _LinkInput = require("./LinkInput");
82
+ var _EditorInput = require("./EditorInput");
@@ -30,9 +30,9 @@ const Person = ({
30
30
  alt: `${name}, ${role}`
31
31
  }), /*#__PURE__*/React.createElement("div", {
32
32
  className: "details"
33
- }, /*#__PURE__*/React.createElement("p", {
33
+ }, name && /*#__PURE__*/React.createElement("p", {
34
34
  className: "name"
35
- }, name), /*#__PURE__*/React.createElement("p", {
35
+ }, name), role && /*#__PURE__*/React.createElement("p", {
36
36
  className: "role"
37
37
  }, role)));
38
38
  Person.propTypes = {
@@ -55,11 +55,11 @@ Person.propTypes = {
55
55
  /**
56
56
  * The person's name
57
57
  */
58
- name: PropTypes.string.isRequired,
58
+ name: PropTypes.string,
59
59
  /**
60
60
  * The person's role
61
61
  */
62
- role: PropTypes.string.isRequired,
62
+ role: PropTypes.string,
63
63
  /**
64
64
  * The base color of the person's component
65
65
  */
@@ -11,7 +11,9 @@ $default-padding:var(--u);
11
11
  $default-horizontal-margin: .5em;
12
12
 
13
13
  $default-grid-gap: 1em;
14
- $default-image-padding: 1.5rem;
14
+ $default-margin: 1.5rem;
15
+ $default-image-margin: var(--default-image-margin, #{$default-margin});
16
+ $default-color: var(--default-color, var(--grey));
15
17
 
16
18
  .#{bem.$base}.people {
17
19
  display: grid;
@@ -29,18 +31,22 @@ $default-image-padding: 1.5rem;
29
31
  .image {
30
32
  border-radius: $default-border-radius;
31
33
  height: var(--image-size);
32
- margin-right: $default-image-padding;
34
+ margin-right: $default-image-margin;
33
35
  width: var(--image-size);
34
36
  }
35
37
 
36
38
  .details {
37
39
  align-items: flex-start;
38
- color: var(--grey);
40
+ color: $default-color;
39
41
  display: flex;
40
42
  flex-direction: column;
41
43
 
44
+ p:only-child {
45
+ margin: 0;
46
+ }
47
+
42
48
  .name {
43
- color: var(--grey);
49
+ color: $default-color;
44
50
  margin-bottom: .1em;
45
51
  }
46
52
 
@@ -23,7 +23,7 @@ const Group = ({
23
23
  import("./styles.scss");
24
24
  }, []);
25
25
  const Wrapper = type === 'snap-scroller' ? SnapScroller : 'div';
26
- const wrapperProps = type === 'snap-scroller' ? {
26
+ const wrapperProps = type === 'snap-scroller' && desktopType !== 'snap-scroller' ? {
27
27
  noScrollOnDesktop: true
28
28
  } : {};
29
29
  return /*#__PURE__*/React.createElement(Wrapper, _extends({
@@ -0,0 +1,186 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+ /* eslint-disable import/no-extraneous-dependencies -- required here */
3
+ import * as React from 'react';
4
+ import { useInsertionEffect, memo } from 'react';
5
+ import { useFormikContext } from 'formik';
6
+ import { LexicalComposer } from '@lexical/react/LexicalComposer';
7
+ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
8
+ import { ContentEditable } from '@lexical/react/LexicalContentEditable';
9
+ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
10
+ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
11
+ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
12
+ import { ListPlugin } from '@lexical/react/LexicalListPlugin';
13
+ import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
14
+ import { AutoLinkNode, LinkNode } from '@lexical/link';
15
+ import { ListItemNode, ListNode } from '@lexical/list';
16
+ import PropTypes from 'prop-types';
17
+ import styleNames from '@pareto-engineering/bem/exports';
18
+
19
+ // Local Definitions
20
+
21
+ import { FormLabel, FormDescription, InputWrapper } from "../../common";
22
+ import { Toolbar, TreeViewPlugin } from "./common";
23
+ const baseClassName = styleNames.base;
24
+ const componentClassName = 'editor-input';
25
+
26
+ /**
27
+ * This is the component description.
28
+ */
29
+ const EditorInput = ({
30
+ id,
31
+ className: userClassName,
32
+ style,
33
+ name,
34
+ label,
35
+ // validate,
36
+ resize,
37
+ color,
38
+ rows,
39
+ optional,
40
+ labelColor,
41
+ description,
42
+ disabled,
43
+ labelSpan,
44
+ desktopLabelSpan,
45
+ inputSpan,
46
+ desktopInputSpan,
47
+ showDebugger
48
+ // ...otherProps
49
+ }) => {
50
+ useInsertionEffect(() => {
51
+ import("./styles.scss");
52
+ }, []);
53
+ const formik = useFormikContext();
54
+ const setInitialValue = () => {
55
+ const value = formik.values[name];
56
+ return value || undefined;
57
+ };
58
+ const onChange = state => {
59
+ formik.setValues({
60
+ ...formik.values,
61
+ [name]: JSON.stringify(state)
62
+ });
63
+ };
64
+ const initialConfig = {
65
+ nameSpace: name,
66
+ editable: !disabled,
67
+ editorState: setInitialValue(),
68
+ theme: {
69
+ text: {
70
+ italic: 'italic',
71
+ strikethrough: 'strikethrough',
72
+ underline: 'underlined'
73
+ }
74
+ },
75
+ nodes: [AutoLinkNode, LinkNode, ListNode, ListItemNode]
76
+ };
77
+ return /*#__PURE__*/React.createElement(LexicalComposer, {
78
+ initialConfig: initialConfig
79
+ }, /*#__PURE__*/React.createElement(FormLabel, {
80
+ name: name,
81
+ color: labelColor,
82
+ optional: optional,
83
+ columnSpan: labelSpan,
84
+ desktopColumnSpan: desktopLabelSpan
85
+ // {...otherProps}
86
+ }, label), /*#__PURE__*/React.createElement(InputWrapper, {
87
+ id: id,
88
+ className: [baseClassName, componentClassName, userClassName, `y-${color}`, disabled && 'disabled'].filter(e => e).join(' '),
89
+ style: {
90
+ ...style,
91
+ '--resize': resize,
92
+ '--rows': `${rows}em`
93
+ },
94
+ columnSpan: inputSpan,
95
+ desktopColumnSpan: desktopInputSpan
96
+ }, !disabled && /*#__PURE__*/React.createElement(Toolbar, null), /*#__PURE__*/React.createElement(RichTextPlugin, {
97
+ contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
98
+ id: name,
99
+ className: "content-editable"
100
+ })
101
+ }), /*#__PURE__*/React.createElement(OnChangePlugin, {
102
+ onChange: onChange
103
+ }), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, null), /*#__PURE__*/React.createElement(FormDescription, {
104
+ className: "s-1",
105
+ description: description,
106
+ name: name
107
+ }), showDebugger && /*#__PURE__*/React.createElement(TreeViewPlugin, null)));
108
+ };
109
+ EditorInput.propTypes = {
110
+ /**
111
+ * The HTML id for this element
112
+ */
113
+ id: PropTypes.string,
114
+ /**
115
+ * The HTML class names for this element
116
+ */
117
+ className: PropTypes.string,
118
+ /**
119
+ * The React-written, css properties for this element.
120
+ */
121
+ style: PropTypes.objectOf(PropTypes.string),
122
+ /**
123
+ * The input name (html - and Formik state)
124
+ */
125
+ name: PropTypes.string.isRequired,
126
+ /**
127
+ * The input label
128
+ */
129
+ label: PropTypes.string.isRequired,
130
+ /**
131
+ * The input value validator function
132
+ */
133
+ // validate:PropTypes.func,
134
+
135
+ /**
136
+ * The number of rows int the text area
137
+ */
138
+ rows: PropTypes.number,
139
+ /**
140
+ * Color of the text
141
+ */
142
+ color: PropTypes.string,
143
+ /**
144
+ * Label base color
145
+ */
146
+ labelColor: PropTypes.string,
147
+ /**
148
+ * Text area description
149
+ */
150
+ description: PropTypes.string,
151
+ /**
152
+ * Whether the text area should be disabled
153
+ */
154
+ disabled: PropTypes.bool,
155
+ /**
156
+ * Whether the input is optional or not
157
+ */
158
+ optional: PropTypes.bool,
159
+ /**
160
+ * The number of columns the label should span
161
+ */
162
+ labelSpan: PropTypes.number,
163
+ /**
164
+ * The number of columns the input should span
165
+ */
166
+ inputSpan: PropTypes.number,
167
+ /**
168
+ * The number of columns the label should span on desktop
169
+ */
170
+ desktopLabelSpan: PropTypes.number,
171
+ /**
172
+ * The number of columns the input should span on desktop
173
+ */
174
+ desktopInputSpan: PropTypes.number,
175
+ /**
176
+ * The resize property of the text area
177
+ */
178
+ resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical'])
179
+ };
180
+ EditorInput.defaultProps = {
181
+ rows: 10,
182
+ disabled: false,
183
+ color: 'paragraph',
184
+ resize: 'vertical'
185
+ };
186
+ export default /*#__PURE__*/memo(EditorInput);
@@ -0,0 +1,182 @@
1
+ /* eslint-disable import/no-extraneous-dependencies -- required here */
2
+ import * as React from 'react';
3
+ import { useEffect, useState, useCallback } from 'react';
4
+ import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';
5
+ import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $isListNode, ListNode } from '@lexical/list';
6
+ import { $isAtNodeEnd } from '@lexical/selection';
7
+ import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
8
+ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
9
+ import { mergeRegister, $getNearestNodeOfType } from '@lexical/utils';
10
+ import styleNames from '@pareto-engineering/bem/exports';
11
+ const baseClassName = styleNames.base;
12
+ const componentClassName = 'toolbar';
13
+ const getSelectedNode = selection => {
14
+ const {
15
+ anchor,
16
+ focus
17
+ } = selection;
18
+ const anchorNode = selection.anchor.getNode();
19
+ const focusNode = selection.focus.getNode();
20
+ if (anchorNode === focusNode) {
21
+ return anchorNode;
22
+ }
23
+ const isBackward = selection.isBackward();
24
+ if (isBackward) {
25
+ return $isAtNodeEnd(focus) ? anchorNode : focusNode;
26
+ }
27
+ return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
28
+ };
29
+ const Toolbar = () => {
30
+ const [editor] = useLexicalComposerContext();
31
+ const [isBold, setIsBold] = useState(false);
32
+ const [isItalic, setIsItalic] = useState(false);
33
+ const [isStrikethrough, setIsStrikethrough] = useState(false);
34
+ const [blockType, setBlockType] = useState('paragraph');
35
+ const [isLink, setIsLink] = useState(false);
36
+ const [isUnderline, setIsUnderline] = useState(false);
37
+ const formatBulletList = () => {
38
+ if (blockType !== 'ul') {
39
+ editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
40
+ } else {
41
+ editor.dispatchCommand(REMOVE_LIST_COMMAND);
42
+ }
43
+ };
44
+ const formatNumberedList = () => {
45
+ if (blockType !== 'ol') {
46
+ editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
47
+ } else {
48
+ editor.dispatchCommand(REMOVE_LIST_COMMAND);
49
+ }
50
+ };
51
+ const formatLink = useCallback(() => {
52
+ if (!isLink) {
53
+ // eslint-disable-next-line no-alert
54
+ const path = prompt('Enter the full URL. Ex: https://www.example.com');
55
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, path);
56
+ } else {
57
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
58
+ }
59
+ }, [editor, isLink]);
60
+ const updateToolbar = useCallback(() => {
61
+ const selection = $getSelection();
62
+
63
+ // Check list selection
64
+ if ($isRangeSelection(selection)) {
65
+ const anchorNode = selection.anchor.getNode();
66
+ const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
67
+ if ($isListNode(element)) {
68
+ const parentList = $getNearestNodeOfType(anchorNode, ListNode);
69
+ const type = parentList ? parentList.getTag() : element.getTag();
70
+ setBlockType(type);
71
+ } else {
72
+ setBlockType(element);
73
+ }
74
+
75
+ // Check selection text styles
76
+ setIsBold(selection.hasFormat('bold'));
77
+ setIsItalic(selection.hasFormat('italic'));
78
+ setIsStrikethrough(selection.hasFormat('strikethrough'));
79
+ setIsUnderline(selection.hasFormat('underline'));
80
+ setIsLink(selection.hasFormat('link'));
81
+
82
+ // Check links
83
+ const node = getSelectedNode(selection);
84
+ const parent = node.getParent();
85
+ if ($isLinkNode(parent) || $isLinkNode(node)) {
86
+ setIsLink(true);
87
+ } else {
88
+ setIsLink(false);
89
+ }
90
+ }
91
+ }, [editor]);
92
+ useEffect(() => mergeRegister(editor.registerUpdateListener(({
93
+ editorState
94
+ }) => {
95
+ editorState.read(() => {
96
+ updateToolbar();
97
+ });
98
+ })), [updateToolbar, editor]);
99
+ return /*#__PURE__*/React.createElement("div", {
100
+ className: `${baseClassName} ${componentClassName}`
101
+ }, /*#__PURE__*/React.createElement("div", {
102
+ className: "group"
103
+ }, /*#__PURE__*/React.createElement("button", {
104
+ type: "button",
105
+ className: isBold ? 'active' : undefined,
106
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')
107
+ }, /*#__PURE__*/React.createElement("span", {
108
+ className: "icon"
109
+ }, "|")), /*#__PURE__*/React.createElement("button", {
110
+ type: "button",
111
+ className: isItalic ? 'active' : undefined,
112
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')
113
+ }, /*#__PURE__*/React.createElement("span", {
114
+ className: "icon"
115
+ }, "}")), /*#__PURE__*/React.createElement("button", {
116
+ type: "button",
117
+ className: isUnderline ? 'active' : undefined,
118
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')
119
+ }, /*#__PURE__*/React.createElement("span", {
120
+ className: "icon"
121
+ }, "~")), /*#__PURE__*/React.createElement("button", {
122
+ type: "button",
123
+ className: isStrikethrough ? 'active' : undefined,
124
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')
125
+ }, /*#__PURE__*/React.createElement("span", {
126
+ className: "icon"
127
+ }, "?")), /*#__PURE__*/React.createElement("button", {
128
+ type: "button",
129
+ className: isLink ? 'active' : undefined,
130
+ onClick: () => formatLink()
131
+ }, /*#__PURE__*/React.createElement("span", {
132
+ className: "icon"
133
+ }, "]")), /*#__PURE__*/React.createElement("button", {
134
+ type: "button",
135
+ className: blockType === 'ul' ? 'active' : undefined,
136
+ onClick: () => formatBulletList()
137
+ }, /*#__PURE__*/React.createElement("span", {
138
+ className: "icon"
139
+ }, ".")), /*#__PURE__*/React.createElement("button", {
140
+ type: "button",
141
+ className: blockType === 'ol' ? 'active' : undefined,
142
+ onClick: () => formatNumberedList()
143
+ }, /*#__PURE__*/React.createElement("span", {
144
+ className: "icon"
145
+ }, "-"))), /*#__PURE__*/React.createElement("div", {
146
+ className: "group"
147
+ }, /*#__PURE__*/React.createElement("button", {
148
+ type: "button",
149
+ onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left')
150
+ }, /*#__PURE__*/React.createElement("span", {
151
+ className: "icon"
152
+ }, "^")), /*#__PURE__*/React.createElement("button", {
153
+ type: "button",
154
+ onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center')
155
+ }, /*#__PURE__*/React.createElement("span", {
156
+ className: "icon"
157
+ }, "_")), /*#__PURE__*/React.createElement("button", {
158
+ type: "button",
159
+ onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')
160
+ }, /*#__PURE__*/React.createElement("span", {
161
+ className: "icon"
162
+ }, "`")), /*#__PURE__*/React.createElement("button", {
163
+ type: "button",
164
+ onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')
165
+ }, /*#__PURE__*/React.createElement("span", {
166
+ className: "icon"
167
+ }, "{"))), /*#__PURE__*/React.createElement("div", {
168
+ className: "group"
169
+ }, /*#__PURE__*/React.createElement("button", {
170
+ type: "button",
171
+ onClick: () => editor.dispatchCommand(UNDO_COMMAND)
172
+ }, /*#__PURE__*/React.createElement("span", {
173
+ className: "icon"
174
+ }, "\\")), /*#__PURE__*/React.createElement("button", {
175
+ type: "button",
176
+ className: "flip",
177
+ onClick: () => editor.dispatchCommand(REDO_COMMAND)
178
+ }, /*#__PURE__*/React.createElement("span", {
179
+ className: "icon"
180
+ }, "\\"))));
181
+ };
182
+ export default Toolbar;
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
3
+ import { TreeView } from '@lexical/react/LexicalTreeView';
4
+ const TreeViewPlugin = () => {
5
+ const [editor] = useLexicalComposerContext();
6
+ return /*#__PURE__*/React.createElement(TreeView, {
7
+ viewClassName: "tree-view-output",
8
+ editor: editor
9
+ });
10
+ };
11
+ export default TreeViewPlugin;
@@ -0,0 +1,2 @@
1
+ export { default as Toolbar } from "./Toolbar";
2
+ export { default as TreeViewPlugin } from "./TreeViewPlugin";
@@ -0,0 +1,2 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+ export { default as EditorInput } from "./EditorInput";
@@ -0,0 +1,119 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+ /* stylelint-disable max-nesting-depth -- required here */
3
+
4
+ @use "@pareto-engineering/bem";
5
+ @use "@pareto-engineering/styles/src/mixins";
6
+ @use "@pareto-engineering/styles/src/globals" as *;
7
+
8
+ $default-gap: calc(var(--gap) / 2);
9
+ $default-padding: .55em .75em;
10
+ $default-border: 1px solid var(--outline-inputs);
11
+ $default-input-border-radius: var(--theme-default-input-border-radius);
12
+ $default-border: var(--theme-default-input-border);
13
+ $focus-border: var(--theme-focus-input-border);
14
+ $active-background: var(--hard-background-inputs);
15
+ $default-background: var(--background-inputs);
16
+ $disabled-background: var(--background-inputs-30);
17
+
18
+ .#{bem.$base}.editor-input {
19
+ &.#{bem.$base}.input-wrapper {
20
+ display: flex;
21
+ flex-direction: column;
22
+
23
+ > .#{bem.$base}.toolbar {
24
+ display: flex;
25
+ gap: $default-gap;
26
+ margin-bottom: .25em;
27
+
28
+ > .group {
29
+ > button {
30
+ background: $default-background;
31
+ border: $default-border;
32
+ padding: $default-padding;
33
+
34
+ &.active {
35
+ background-color: $active-background;
36
+ }
37
+ }
38
+ }
39
+
40
+ .flip {
41
+ transform: scaleX(-1);
42
+ }
43
+ }
44
+
45
+ &:not(.disabled) {
46
+ &:hover,
47
+ &:focus,
48
+ &:active {
49
+ > .textarea {
50
+ border: $focus-border;
51
+ }
52
+ }
53
+ }
54
+
55
+ &.disabled {
56
+ > .textarea {
57
+ background: $disabled-background;
58
+ color: var(--metadata);
59
+ cursor: not-allowed;
60
+ }
61
+ }
62
+
63
+ > .content-editable {
64
+ background: $default-background;
65
+ border: $default-border;
66
+ border-radius: $default-input-border-radius;
67
+ color: var(--y);
68
+ height: var(--rows);
69
+ outline: none;
70
+ overflow: auto;
71
+ padding: $default-padding;
72
+ resize: var(--resize);
73
+ width: 100%;
74
+
75
+ li:has(ol, ul) {
76
+ list-style-type: none;
77
+ }
78
+
79
+ p,
80
+ span,
81
+ strong,
82
+ em,
83
+ li {
84
+ &.underlined {
85
+ text-decoration: underline;
86
+
87
+ &.strikethrough {
88
+ text-decoration: underline line-through;
89
+ }
90
+ }
91
+
92
+ &.strikethrough {
93
+ text-decoration: line-through;
94
+ }
95
+
96
+ &.italic {
97
+ font-style: italic;
98
+ }
99
+ }
100
+
101
+ :first-child {
102
+ margin-top: 0;
103
+ }
104
+
105
+ &::placeholder {
106
+ color: var(--metadata);
107
+ }
108
+ }
109
+ }
110
+
111
+ > .tree-view-output {
112
+ background: $default-background;
113
+ border: $default-border;
114
+ border-radius: $default-input-border-radius;
115
+ max-height: 20em;
116
+ overflow: auto;
117
+ padding: $default-padding;
118
+ }
119
+ }
@@ -93,7 +93,7 @@ const Combobox = ({
93
93
  desktopColumnSpan: desktopLabelSpan
94
94
  }), label), /*#__PURE__*/React.createElement(InputWrapper, _extends({
95
95
  id: id,
96
- className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
96
+ className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
97
97
  style: style,
98
98
  ref: parentRef
99
99
  }, getComboboxProps(), {
@@ -14,7 +14,9 @@ $default-border: var(--theme-default-input-border);
14
14
  $hover-border: var(--theme-hover-input-border);
15
15
  $focus-border: var(--theme-focus-input-border);
16
16
  $default-background: var(--background-inputs);
17
+ $on-default-background: var(--paragraph);
17
18
  $disabled-background: var(--background-inputs-30);
19
+ $on-disabled-background: var(--on-background-inputs-30);
18
20
 
19
21
  .#{bem.$base}.combobox,
20
22
  .#{bem.$base}.multiple-combobox {
@@ -74,7 +76,7 @@ $disabled-background: var(--background-inputs-30);
74
76
  background: $default-background;
75
77
  border: $default-border;
76
78
  border-radius: calc(var(--theme-default-border-radius) / 2);
77
- color: var(--on-y);
79
+ color: $on-default-background;
78
80
  outline: none;
79
81
  padding: $default-input-padding;
80
82
 
@@ -84,6 +86,7 @@ $disabled-background: var(--background-inputs-30);
84
86
 
85
87
  &:disabled {
86
88
  background-color: $disabled-background;
89
+ color: $on-disabled-background;
87
90
  }
88
91
 
89
92
  &:not(:disabled) {
@@ -7,4 +7,5 @@ export { QueryCombobox } from "./QueryCombobox";
7
7
  export { QuerySelect } from "./QuerySelect";
8
8
  export { Checkbox } from "./Checkbox";
9
9
  export { QueryChoices } from "./QueryChoices";
10
- export { LinkInput } from "./LinkInput";
10
+ export { LinkInput } from "./LinkInput";
11
+ export { EditorInput } from "./EditorInput";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pareto-engineering/design-system",
3
- "version": "4.0.0-alpha.39",
3
+ "version": "4.0.0-alpha.41",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.js",
@@ -50,7 +50,8 @@
50
50
  "style-loader": "^3.3.2"
51
51
  },
52
52
  "dependencies": {
53
- "@pareto-engineering/assets": "^4.0.0-alpha.34",
53
+ "@lexical/react": "^0.11.3",
54
+ "@pareto-engineering/assets": "^4.0.0-alpha.40",
54
55
  "@pareto-engineering/bem": "^4.0.0-alpha.20",
55
56
  "@pareto-engineering/styles": "^4.0.0-alpha.39",
56
57
  "@pareto-engineering/utils": "^4.0.0-alpha.33",
@@ -58,6 +59,7 @@
58
59
  "downshift": "^6.1.12",
59
60
  "formik": "^2.2.9",
60
61
  "hamburgers": "^1.2.1",
62
+ "lexical": "^0.11.3",
61
63
  "lodash": "^4.17.21",
62
64
  "prop-types": "^15.8.1",
63
65
  "react": "^18.2.0",
@@ -68,5 +70,5 @@
68
70
  "relay-test-utils": "^15.0.0"
69
71
  },
70
72
  "browserslist": "> 2%",
71
- "gitHead": "6697f56d2d6003af7adcc7ee4bf7e22e1ad2db61"
73
+ "gitHead": "d02bcd514202331d31637ec62653fb2ce4f33c93"
72
74
  }