@desynova-digital/components 9.1.0 → 9.1.2

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 (5) hide show
  1. package/_helpers/utils.js +8 -8
  2. package/atoms/label/label.js +26 -26
  3. package/molecules/richTextInput/RichTextInput.js +64 -57
  4. package/molecules/richTextInput/RichTextInput.story.js +164 -17
  5. package/package.json +2 -2
package/_helpers/utils.js CHANGED
@@ -20,16 +20,16 @@ function timeToSeconds() {
20
20
  }
21
21
  var cleanHtml = exports.cleanHtml = function cleanHtml(htmlStr) {
22
22
  return htmlStr.replace(/"/g, '"') // Replace " with "
23
- .replace(/ /g, " ") // Replace   with a space
24
- .replace(/'|'/g, "'") // Replace ' and ' with '
25
- .replace(/&|&;/g, "&") // Replace & and &; with &
26
- .replace(/&lt;/g, "<") // Replace &lt; with <
27
- .replace(/&gt;/g, ">") // Replace &gt; with >
23
+ .replace(/&nbsp;/g, ' ') // Replace &nbsp; with a space
24
+ .replace(/&apos;|&#x27;|&#39;/g, "'") // Replace &apos; and &#x27; with '
25
+ .replace(/&amp;|&;/g, '&') // Replace &amp; and &; with &
26
+ .replace(/&lt;/g, '<') // Replace &lt; with <
27
+ .replace(/&gt;/g, '>') // Replace &gt; with >
28
28
  .replace(/[\u2018\u2019]/g, "'") // Replace special single quotes
29
29
  .replace(/[\u201C\u201D]/g, '"') // Replace special double quotes
30
- .replace(/<br\s*\/?>/gi, "") // Remove <br> tags
31
- .replace(/\s{2,}/g, " ") // Replace multiple spaces with a single space
32
- .replace(/\s\s+/g, "").replace(/\t/g, "").replace(/\n/g, " ");
30
+ .replace(/<br\s*\/?>/gi, '') // Remove <br> tags
31
+ .replace(/\s{2,}/g, ' ') // Replace multiple spaces with a single space
32
+ .replace(/\s\s+/g, '').replace(/\t/g, '').replace(/\\"/g, '"').replace(/\n/g, ' ');
33
33
  };
34
34
 
35
35
  /**
package/atoms/label/label.js CHANGED
@@ -10,56 +10,56 @@ var _react = _interopRequireDefault(require("react"));
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
  var _styledComponents = _interopRequireDefault(require("styled-components"));
12
12
  var _templateObject, _templateObject2;
13
- var LabelStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n padding: 3px;\n border-radius: 2px;\n display: inline-block;\n color: ", ";\n background-color: ", ";\n font-size: 10px;\n line-height: 1;\n text-transform: uppercase;\n font-family: 'SFUIText-Medium';\n"])), function (_ref) {
13
+ var LabelStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n padding: 3px;\n border-radius: 2px;\n display: inline-block;\n color: ", ";\n background-color: ", ";\n font-size: 10px;\n line-height: 1;\n text-transform: uppercase;\n font-family: \"SFUIText-Medium\";\n"])), function (_ref) {
14
14
  var hex = _ref.hex;
15
- return hex.color || '#0C141D';
15
+ return hex.color || "#0C141D";
16
16
  }, function (_ref2) {
17
17
  var hex = _ref2.hex;
18
- return hex.background || '#AFB2BA';
18
+ return hex.background || "#AFB2BA";
19
19
  });
20
20
  var PercentageBox = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n width: 60px;\n height: 20px;\n background-color: ", ";\n border-radius: 2px;\n\n .filler {\n position: absolute;\n width: ", ";\n top: 0;\n left: 0;\n height: 100%;\n background-color: ", ";\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n transition: width 0.5s;\n }\n\n .percentage-label {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: ", ";\n font-size: 12px;\n font-weight: 700;\n }\n"])), function (_ref3) {
21
21
  var percentageField = _ref3.percentageField;
22
- return percentageField.backgroundColor || '#red';
22
+ return percentageField.backgroundColor || "#red";
23
23
  }, function (_ref4) {
24
24
  var fillerWidth = _ref4.fillerWidth;
25
- return fillerWidth || '0px';
25
+ return fillerWidth || "0px";
26
26
  }, function (_ref5) {
27
27
  var percentageField = _ref5.percentageField;
28
- return percentageField.fillerColor || '#ccc';
28
+ return percentageField.fillerColor || "#ccc";
29
29
  }, function (_ref6) {
30
30
  var percentageField = _ref6.percentageField;
31
- return percentageField.textColor || '#fff';
31
+ return percentageField.textColor || "#fff";
32
32
  });
33
33
  var LABEL_STYLES = [{
34
- code: ['cancelled', 'error', 'failed', 'upload_cancelled_by_user', 'rejected'],
34
+ code: ["cancelled", "error", "failed", "upload_cancelled_by_user", "rejected"],
35
35
  hex: {
36
- background: '#FF6C56',
37
- color: '#FFF'
36
+ background: "#FF6C56",
37
+ color: "#FFF"
38
38
  }
39
39
  }, {
40
- code: ['in_queue', 'inqueue', 'running', 'verifying', 'approval_pending'],
40
+ code: ["in_queue", "inqueue", "running", "verifying", "approval_pending"],
41
41
  hex: {
42
- background: '#F9E900'
42
+ background: "#F9E900"
43
43
  }
44
44
  }, {
45
- code: ['finished', 'archived', 'restored', 'approved', 'success', 'complete', 'upload_finished', 'delivered', 'ingested', 'tagged', 'created', 'shared'],
45
+ code: ["finished", "archived", "restored", "approved", "success", "complete", "upload_finished", "delivered", "ingested", "tagged", "created", "shared"],
46
46
  hex: {
47
- background: '#18B96E'
47
+ background: "#18B96E"
48
48
  }
49
49
  }, {
50
- code: ['paused', 'initiated', 'started', 'upload_paused'],
50
+ code: ["paused", "initiated", "started", "upload_paused", "generating"],
51
51
  hex: {
52
- background: '#FFF'
52
+ background: "#FFF"
53
53
  }
54
54
  }, {
55
- code: ['pending', 'approval_pending', 'final_upload'],
55
+ code: ["pending", "approval_pending", "final_upload"],
56
56
  hex: {
57
- background: '#AFB2BA'
57
+ background: "#AFB2BA"
58
58
  }
59
59
  }, {
60
- code: ['in_progress', 'in_review', 'dummy', 'inprogress'],
60
+ code: ["in_progress", "in_review", "dummy", "inprogress"],
61
61
  hex: {
62
- background: '#FF8D29'
62
+ background: "#FF8D29"
63
63
  }
64
64
  }];
65
65
  var Label = function Label(props) {
@@ -67,7 +67,7 @@ var Label = function Label(props) {
67
67
  percentageStatus = props.percentageStatus,
68
68
  percentageField = props.percentageField;
69
69
  if (percentageStatus) {
70
- var value = Math.round(parseFloat(percentageStatus)) + '%';
70
+ var value = Math.round(parseFloat(percentageStatus)) + "%";
71
71
  return /*#__PURE__*/_react["default"].createElement(PercentageBox, {
72
72
  fillerWidth: value,
73
73
  percentageField: percentageField
@@ -78,13 +78,13 @@ var Label = function Label(props) {
78
78
  }, value));
79
79
  }
80
80
  // eg. status = Upload Cancelled By User
81
- var arr = status ? status.toLowerCase().split(' ') : []; // [upload, cancelled, by, user]
81
+ var arr = status ? status.toLowerCase().split(" ") : []; // [upload, cancelled, by, user]
82
82
  var formatted = arr.reduce(function (acc, curr, index, org) {
83
83
  if (index + 1 === arr.length) {
84
84
  acc = acc + curr;
85
- } else acc = acc + curr + '_';
85
+ } else acc = acc + curr + "_";
86
86
  return acc;
87
- }, ''); // upload_cancelled_by_user
87
+ }, ""); // upload_cancelled_by_user
88
88
  var index = LABEL_STYLES.findIndex(function (label) {
89
89
  return label.code.includes(formatted);
90
90
  });
@@ -94,9 +94,9 @@ var Label = function Label(props) {
94
94
  };
95
95
  Label.propTypes = {
96
96
  /** The visual style used to convey the label's purpose */
97
- theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
97
+ theme: _propTypes["default"].oneOf(["light", "dark", "nexc"])
98
98
  };
99
99
  Label.defaultProps = {
100
- theme: 'light'
100
+ theme: "light"
101
101
  };
102
102
  var _default = exports["default"] = Label;
package/molecules/richTextInput/RichTextInput.js CHANGED
@@ -16,6 +16,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
16
16
  var _styledComponents = _interopRequireDefault(require("styled-components"));
17
17
  var _tokens = require("@desynova-digital/tokens");
18
18
  var _lodash = require("lodash");
19
+ var _quillDelta = _interopRequireDefault(require("quill-delta"));
19
20
  var _utils = require("../../_helpers/utils");
20
21
  var _excluded = ["maxLength", "defaultValue", "label", "showLengthCount", "errorMessage", "value", "autoFocus", "onChange", "handleSave", "editType"];
21
22
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -48,7 +49,7 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
48
49
  setCharCount = _useState4[1];
49
50
  var quillRef = (0, _react.useRef)(null);
50
51
  var quillInstance = (0, _react.useRef)(null);
51
- var clickedKey = (0, _react.useRef)("");
52
+ var clickedKey = (0, _react.useRef)('');
52
53
  (0, _react.useImperativeHandle)(ref, function () {
53
54
  return {
54
55
  getEditorContent: function getEditorContent() {
@@ -56,7 +57,7 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
56
57
  var html = quillInstance.current.root.innerHTML;
57
58
  return changeEmToI(html);
58
59
  }
59
- return "";
60
+ return '';
60
61
  },
61
62
  setEditorContent: function setEditorContent(content) {
62
63
  if (quillInstance.current) {
@@ -73,8 +74,8 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
73
74
  * @returns
74
75
  */
75
76
  var changeEmToI = function changeEmToI(str) {
76
- var updatedStr = str.replace(/\n/g, "").replace(/<br\s*\/?>/gi, "").replace(/<\/?p>/gi, "").replace(/<[/]?em>/g, function (match) {
77
- return match === "<em>" ? "<i>" : "</i>";
77
+ var updatedStr = str.replace(/\n/g, '').replace(/<br\s*\/?>/gi, '').replace(/<\/?p>/gi, '').replace(/<[/]?em>/g, function (match) {
78
+ return match === '<em>' ? '<i>' : '</i>';
78
79
  });
79
80
 
80
81
  // Remove surrounding <p> tags if present
@@ -83,11 +84,11 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
83
84
  return match ? match[1] : updatedStr;
84
85
  };
85
86
 
86
- // Initialize Quill
87
+ // Initialize quill
87
88
  (0, _react.useEffect)(function () {
88
89
  if (!(quillInstance !== null && quillInstance !== void 0 && quillInstance.current)) {
89
90
  var quill = new _quill["default"](quillRef.current, {
90
- theme: "snow",
91
+ theme: 'snow',
91
92
  modules: {
92
93
  toolbar: false,
93
94
  keyboard: {
@@ -98,9 +99,9 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
98
99
  // Tab key
99
100
  handler: function handler() {
100
101
  var currentEditor = quillInstance.current.root;
101
- var editors = document.querySelectorAll(".ql-editor");
102
+ var editors = document.querySelectorAll('.ql-editor');
102
103
  var currentIndex = Array.from(editors).indexOf(currentEditor);
103
- if (editType === "mainEdit" && currentIndex !== -1 && currentIndex < editors.length - 1) {
104
+ if (editType === 'mainEdit' && currentIndex !== -1 && currentIndex < editors.length - 1) {
104
105
  editors[currentIndex + 1].focus();
105
106
  }
106
107
  }
@@ -113,9 +114,9 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
113
114
  // Shift key combination
114
115
  handler: function handler() {
115
116
  var currentEditor = quillInstance.current.root;
116
- var editors = document.querySelectorAll(".ql-editor");
117
+ var editors = document.querySelectorAll('.ql-editor');
117
118
  var currentIndex = Array.from(editors).indexOf(currentEditor);
118
- if (editType === "mainEdit" && currentIndex !== -1 && currentIndex > 0) {
119
+ if (editType === 'mainEdit' && currentIndex !== -1 && currentIndex > 0) {
119
120
  editors[currentIndex - 1].focus(); // Move focus to the previous editor
120
121
  }
121
122
  }
@@ -124,6 +125,12 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
124
125
  }
125
126
  }
126
127
  });
128
+
129
+ // Ensure plain text is pasted instead of formatted content
130
+ quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
131
+ var plainText = node.innerText || node.textContent; // Extract plain text
132
+ return new _quillDelta["default"]().insert(plainText); // Insert plain text without formatting
133
+ });
127
134
  quillInstance.current = quill;
128
135
  }
129
136
  var handleFocus = function handleFocus() {
@@ -131,9 +138,9 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
131
138
  quillInstance.current.setSelection(length - 1, 0);
132
139
  };
133
140
  var editorRoot = quillInstance.current.root;
134
- editorRoot.addEventListener("focus", handleFocus);
141
+ editorRoot.addEventListener('focus', handleFocus);
135
142
  var updateCharCount = function updateCharCount() {
136
- var text = quillInstance.current.getText().replace(/\n/g, "");
143
+ var text = quillInstance.current.getText().replace(/\n/g, '');
137
144
  var characterCount = text.length;
138
145
  setCharCount(characterCount);
139
146
  var selection = quillInstance.current.getSelection();
@@ -143,13 +150,13 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
143
150
  var startDeleteIndex = selection.index - excessCharacters;
144
151
  var safeDeleteIndex = Math.max(0, startDeleteIndex);
145
152
  quillInstance.current.deleteText(safeDeleteIndex, excessCharacters);
146
- text = quillInstance.current.getText().replace(/\n/g, "");
153
+ text = quillInstance.current.getText().replace(/\n/g, '');
147
154
  characterCount = text.length;
148
155
  }
149
156
  setCharCount(characterCount);
150
157
  var html = quillInstance.current.getSemanticHTML();
151
- html = changeEmToI(html);
152
- if (onChange && clickedKey.current !== "enter") {
158
+ html = changeEmToI((0, _utils.cleanHtml)(html));
159
+ if (onChange && clickedKey.current !== 'enter') {
153
160
  onChange({
154
161
  target: {
155
162
  value: html,
@@ -159,13 +166,13 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
159
166
  }
160
167
  }
161
168
  };
162
- quillInstance.current.on("text-change", updateCharCount);
169
+ quillInstance.current.on('text-change', updateCharCount);
163
170
  var editorContainer = quillInstance.current.root;
164
- editorContainer.classList.add("quill-editor-content");
171
+ editorContainer.classList.add('quill-editor-content');
165
172
  return function () {
166
- quillInstance.current.off("text-change", updateCharCount);
167
- quillRef.current.innerHTML = "";
168
- editorRoot.removeEventListener("focus", handleFocus);
173
+ quillInstance.current.off('text-change', updateCharCount);
174
+ quillRef.current.innerHTML = '';
175
+ editorRoot.removeEventListener('focus', handleFocus);
169
176
  };
170
177
  }, []);
171
178
 
@@ -181,21 +188,21 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
181
188
  handleSave(html);
182
189
  }, 0);
183
190
  var handleKeyDown = function handleKeyDown(event) {
184
- if (event.key === "Enter") {
191
+ if (event.key === 'Enter') {
185
192
  event.preventDefault();
186
193
  var html = quillInstance.current.getSemanticHTML();
187
194
  html = changeEmToI(html);
188
- clickedKey.current = "enter";
195
+ clickedKey.current = 'enter';
189
196
  debouncedHandleSave(html);
190
- } else if (event.key === "Backspace" || event.key === "Delete") {
191
- clickedKey.current = "backspace";
197
+ } else if (event.key === 'Backspace' || event.key === 'Delete') {
198
+ clickedKey.current = 'backspace';
192
199
  } else {
193
- clickedKey.current = "";
200
+ clickedKey.current = '';
194
201
  }
195
202
  };
196
- editorContainer.addEventListener("keydown", handleKeyDown);
203
+ editorContainer.addEventListener('keydown', handleKeyDown);
197
204
  return function () {
198
- editorContainer.removeEventListener("keydown", handleKeyDown);
205
+ editorContainer.removeEventListener('keydown', handleKeyDown);
199
206
  debouncedHandleSave.cancel(); // Clean up debounce
200
207
  };
201
208
  }
@@ -208,22 +215,22 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
208
215
  if (value && currentContent !== value) {
209
216
  var selection = quillInstance.current.getSelection(); // Capture cursor position
210
217
 
211
- var content = changeEmToI(value) || "";
218
+ var content = changeEmToI(value) || '';
212
219
  quillInstance.current.clipboard.dangerouslyPasteHTML(content); // Insert HTML content in Quill editor
213
220
  var textLength = quillInstance.current.getLength();
214
221
  if (selection && selection.index !== 0) {
215
222
  quillInstance.current.setSelection(selection.index, selection.length); // Restore previous cursor position
216
- } else if (selection && selection.index === 0 && clickedKey.current === "backspace") {
223
+ } else if (selection && selection.index === 0 && clickedKey.current === 'backspace') {
217
224
  quillInstance.current.setSelection(0, 0); // Keep cursor at start when pressing backspace
218
225
  } else {
219
226
  quillInstance.current.setSelection(charCount || textLength - 1, (selection === null || selection === void 0 ? void 0 : selection.length) || 0); // Move cursor right for other cases
220
227
 
221
- if (editType === "mainEdit" && !selection) {
228
+ if (editType === 'mainEdit' && !selection) {
222
229
  quillInstance.current.blur();
223
230
  // Select the first video element
224
- var videoElement = document.getElementsByTagName("video")[0];
231
+ var videoElement = document.getElementsByTagName('video')[0];
225
232
  // Add a tabindex attribute to make it focusable
226
- videoElement.setAttribute("tabindex", "0");
233
+ videoElement.setAttribute('tabindex', '0');
227
234
  videoElement.focus();
228
235
  }
229
236
  }
@@ -247,14 +254,14 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
247
254
  value: value,
248
255
  defaultValue: defaultValue
249
256
  }, props, {
250
- maxLength: maxLength || "",
257
+ maxLength: maxLength || '',
251
258
  showLengthCount: showLengthCount || false
252
259
  }), /*#__PURE__*/_react["default"].createElement("div", {
253
260
  ref: quillRef
254
- })), label && quillInstance.current && /*#__PURE__*/_react["default"].createElement("label", {
261
+ })), label && /*#__PURE__*/_react["default"].createElement("label", {
255
262
  htmlFor: props.id,
256
- className: charCount || focus ? "floaton" : ""
257
- }, "".concat(label).concat(props.required ? "*" : "")), errorMessage && /*#__PURE__*/_react["default"].createElement(RichTextInputError, {
263
+ className: charCount || focus ? 'floaton' : ''
264
+ }, "".concat(label).concat(props.required ? '*' : '')), errorMessage && /*#__PURE__*/_react["default"].createElement(RichTextInputError, {
258
265
  value: value,
259
266
  theme: props.theme,
260
267
  error: props.error
@@ -270,39 +277,39 @@ var returnPadding = function returnPadding(props) {
270
277
  var digitCount = props.maxLength.toString().length;
271
278
  switch (digitCount) {
272
279
  case 0:
273
- return "7px 0px 2px 0px";
280
+ return '7px 0px 2px 0px';
274
281
  case 1:
275
- return "7px 40px 2px 0px";
282
+ return '7px 40px 2px 0px';
276
283
  case 2:
277
- return "7px 60px 2px 0px";
284
+ return '7px 60px 2px 0px';
278
285
  case 3:
279
- return "7px 75px 2px 0px";
286
+ return '7px 75px 2px 0px';
280
287
  case 4:
281
- return "7px 90px 2px 0px";
288
+ return '7px 90px 2px 0px';
282
289
  case 5:
283
- return "7px 110px 2px 0px";
290
+ return '7px 110px 2px 0px';
284
291
  default:
285
- return "7px 0px 2px 0px";
292
+ return '7px 0px 2px 0px';
286
293
  }
287
294
  };
288
295
  var RichTextEditorContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 48px;\n overflow-y: scroll;\n ::-webkit-scrollbar {\n width: 0; /* Remove scrollbar space */\n background: transparent; /* Optional: just make scrollbar invisible */\n }\n white-space: nowrap;\n width: 100%;\n text-wrap: wrap;\n box-sizing: border-box;\n border-bottom: 1px solid\n ", ";\n\n font-family: \"SFUIText-Medium\";\n font-size: 14px;\n color: ", ";\n\n display: inline-block;\n position: relative;\n padding: ", ";\n &:hover {\n border-color: ", ";\n }\n\n &:focus-within {\n border-color: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n\n &:focus-within::placeholder {\n color: ", ";\n opacity: ", ";\n }\n"])), function (props) {
289
- return props.theme === "light" ? _tokens.colors.light.inputCommon.border : _tokens.colors.dark.inputCommon.border;
296
+ return props.theme === 'light' ? _tokens.colors.light.inputCommon.border : _tokens.colors.dark.inputCommon.border;
290
297
  }, function (props) {
291
- return props.theme === "light" ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
298
+ return props.theme === 'light' ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
292
299
  }, function (props) {
293
- return returnPadding(props || "");
300
+ return returnPadding(props || '');
294
301
  }, function (props) {
295
- return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
302
+ return props.theme === 'light' ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
296
303
  }, function (props) {
297
- return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
304
+ return props.theme === 'light' ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
298
305
  }, function (props) {
299
- return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
306
+ return props.theme === 'light' ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
300
307
  }, function (props) {
301
- return props.label ? "0" : "1";
308
+ return props.label ? '0' : '1';
302
309
  }, function (props) {
303
- return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
310
+ return props.theme === 'light' ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
304
311
  }, function (props) {
305
- return props.label ? "1" : "1";
312
+ return props.label ? '1' : '1';
306
313
  });
307
314
  RichTextInput.propTypes = {
308
315
  masked: _propTypes["default"].bool,
@@ -336,18 +343,18 @@ RichTextInput.propTypes = {
336
343
  simpleEdit: _propTypes["default"].bool,
337
344
  required: _propTypes["default"].bool,
338
345
  autoFocus: _propTypes["default"].bool,
339
- theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
340
- fieldType: _propTypes["default"].oneOf(["inputField", "textArea"])
346
+ theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
347
+ fieldType: _propTypes["default"].oneOf(['inputField', 'textArea'])
341
348
  };
342
349
  RichTextInput.defaultProps = {
343
350
  autoFocus: false,
344
- fieldType: "textArea",
351
+ fieldType: 'textArea',
345
352
  readOnly: false,
346
353
  code: false,
347
354
  error: null,
348
355
  onChange: null,
349
- type: "text",
350
- theme: "light",
356
+ type: 'text',
357
+ theme: 'light',
351
358
  showLengthCount: false,
352
359
  simpleEdit: false
353
360
  };
package/molecules/richTextInput/RichTextInput.story.js CHANGED
@@ -10,41 +10,188 @@ var _this = void 0;
10
10
  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
11
11
  title: "Appearances"
12
12
  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
13
- inputWidth: 300,
14
- fieldType: "inputField",
15
- showLengthCount: true,
16
13
  type: "text",
17
14
  label: "First Name",
18
15
  onKeyPress: function onKeyPress(e) {
19
- return _this.value = e;
16
+ return _this.value = e.target.value;
20
17
  },
21
18
  onChange: function onChange(e) {
22
- return console.log(e.html, e.size);
19
+ return console.log(e.target.value);
23
20
  },
24
21
  placeholder: "Enter Name max 10",
25
- maxLength: 1000,
26
22
  value: "asd",
27
23
  required: true
24
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
25
+ type: "password",
26
+ label: "Middle Name",
27
+ minLength: 3,
28
+ maxLength: 6,
29
+ placeholder: "Show as password",
30
+ required: true
31
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
32
+ type: "text",
33
+ value: "hello",
34
+ label: "Label and default value",
35
+ required: true
36
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
37
+ type: "number",
38
+ placeholder: "number field & no Label",
39
+ required: true,
40
+ maxLength: 10
41
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
42
+ type: "number",
43
+ id: "input-text-1",
44
+ label: "Label 'For'-'id' prop",
45
+ placeholder: "No Label & Number Field",
46
+ required: true,
47
+ maxLength: 10
48
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
49
+ type: "text",
50
+ value: "No Label and default value",
51
+ onChange: function onChange(e) {
52
+ alert("some Handler code");
53
+ },
54
+ placeholder: "Placeholder text",
55
+ required: true
56
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
57
+ type: "number",
58
+ label: "number & max 5",
59
+ placeholder: "max length 5",
60
+ required: true,
61
+ minLength: 3,
62
+ maxLength: 5
63
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
64
+ type: "text",
65
+ error: "Invalid text",
66
+ placeholder: "Display error",
67
+ required: true
68
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
69
+ readOnly: true,
70
+ type: "text",
71
+ value: "hello",
72
+ onChange: function onChange(e) {
73
+ alert("some Handler code");
74
+ },
75
+ placeholder: "Placeholder text",
76
+ required: true
77
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
78
+ type: "password",
79
+ value: "this@is$passw0rd",
80
+ placeholder: "This is password toggle",
81
+ passwordButton: true
82
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
83
+ label: "Label 'For'-'id' prop",
84
+ type: "password",
85
+ value: "this@is$passw0rd",
86
+ placeholder: "This is password toggle",
87
+ passwordButton: true
88
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
89
+ label: "Label 'For'-'id' ",
90
+ error: " this is error",
91
+ type: "password",
92
+ value: "this@is$passw0rd",
93
+ placeholder: "This is password toggle",
94
+ passwordButton: true
28
95
  })));
29
96
  });
30
- (0, _react2.storiesOf)("DraftInputText").add("dark theme", function () {
97
+ (0, _react2.storiesOf)("RichTextInput").add("dark theme", function () {
31
98
  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
32
- title: "Appearances"
99
+ title: "Appearances",
100
+ background: "dark"
33
101
  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
34
- inputWidth: 300,
35
- fieldType: "inputField",
36
- showLengthCount: true,
102
+ theme: "dark",
37
103
  type: "text",
38
104
  label: "First Name",
39
- onKeyPress: function onKeyPress(e) {
40
- return _this.value = e;
41
- },
105
+ showLengthCount: true,
106
+ value: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m",
107
+ maxLength: 100,
42
108
  onChange: function onChange(e) {
43
- return console.log(e.html, e.size);
109
+ return console.log(e.target.value);
44
110
  },
45
111
  placeholder: "Enter Name max 10",
46
- maxLength: 1000,
47
- value: "asd",
48
112
  required: true
113
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
114
+ theme: "dark",
115
+ type: "password",
116
+ label: "Middle Name",
117
+ minLength: 3,
118
+ maxLength: 6,
119
+ placeholder: "Show as password",
120
+ required: true
121
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
122
+ theme: "dark",
123
+ type: "text",
124
+ value: "hello there i am using",
125
+ label: "Label and default value",
126
+ required: true
127
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
128
+ theme: "dark",
129
+ type: "number",
130
+ placeholder: "number field & no Label",
131
+ required: true,
132
+ maxLength: 10
133
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
134
+ theme: "dark",
135
+ type: "number",
136
+ id: "input-text-1",
137
+ label: "Label 'For'-'id' prop",
138
+ placeholder: "No Label & Number Field",
139
+ required: true,
140
+ maxLength: 10
141
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
142
+ theme: "dark",
143
+ capitalizeFirstLetter: true,
144
+ type: "text",
145
+ value: "no label and default value",
146
+ onChange: function onChange(e) {
147
+ alert("some Handler code");
148
+ },
149
+ placeholder: "Placeholder text",
150
+ required: true
151
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
152
+ theme: "dark",
153
+ type: "number",
154
+ label: "number & max 5",
155
+ placeholder: "max length 5",
156
+ required: true,
157
+ minLength: 3,
158
+ maxLength: 5
159
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
160
+ theme: "dark",
161
+ type: "text",
162
+ error: "Invalid text",
163
+ placeholder: "Display error",
164
+ required: true
165
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
166
+ theme: "dark",
167
+ readOnly: true,
168
+ type: "text",
169
+ value: "hello",
170
+ onChange: function onChange(e) {
171
+ alert("some Handler code");
172
+ },
173
+ placeholder: "Placeholder text",
174
+ required: true
175
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
176
+ theme: "dark",
177
+ type: "password",
178
+ value: "this@is$passw0rd",
179
+ placeholder: "This is password toggle",
180
+ passwordButton: true
181
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
182
+ theme: "dark",
183
+ label: "Label 'For'-'id' prop",
184
+ type: "password",
185
+ value: "this@is$passw0rd",
186
+ placeholder: "This is password toggle",
187
+ passwordButton: true
188
+ }), /*#__PURE__*/_react["default"].createElement(_components.RichTextInput, {
189
+ theme: "dark",
190
+ label: "Label 'For'-'id' ",
191
+ error: " this is error",
192
+ type: "password",
193
+ value: "this@is$passw0rd",
194
+ placeholder: "This is password toggle",
195
+ passwordButton: true
49
196
  })));
50
197
  });
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.1.0",
3
+ "version": "9.1.2",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "9.1.0",
10
+ "@desynova-digital/tokens": "9.1.2",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },