@desynova-digital/components 9.2.1 → 9.2.3

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 (11) hide show
  1. package/atoms/cardV2/cardV2.js +10 -5
  2. package/atoms/cardV2/content.js +94 -150
  3. package/atoms/cardV2/contentV2.js +287 -0
  4. package/atoms/cardV2/thumbnail.js +58 -61
  5. package/atoms/cardV2/thumbnailV2.js +251 -0
  6. package/atoms/icon/icon.story.js +230 -203
  7. package/atoms/timeCodeInput/timeCodeMSInput.js +6 -4
  8. package/atoms/timeCodeInput/timeCodeMainInput.js +6 -4
  9. package/atoms/timeCodeInput/timeCodeStandardInput.js +6 -4
  10. package/molecules/richTextInputV2/RichTextInputV2.js +10 -2
  11. package/package.json +2 -2
package/atoms/timeCodeInput/timeCodeMSInput.js CHANGED
@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
13
13
  var _utils = require("../../_helpers/utils");
14
14
  var _tokens = require("@desynova-digital/tokens");
15
- var _components = require("@desynova-digital/components");
15
+ var _icon = _interopRequireDefault(require("../icon"));
16
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
17
17
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
20
20
  var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n font-size: 12px;\n /* color: ", "; */\n color: ", ";\n text-align: left;\n padding: 0;\n border: none;\n outline: none;\n background: transparent;\n &:hover {\n color: ", ";\n }\n max-width: 79px;\n /* width: ", "; */\n border-bottom: ", ";\n padding-bottom: 1px;\n"])), function (props) {
21
21
  return props.isValid ? "#FFFFFF" : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? "#FF6C56" : "#FFFFFF";
22
22
  }, function (props) {
23
- return props.isValid ? "#FFFFFF" : "#FF6C56";
23
+ return props.isValid ? props.color || "#FFFFFF" : "#FF6C56";
24
24
  }, function (props) {
25
25
  return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : "rgb(0 206 198)";
26
26
  }, function (props) {
@@ -57,7 +57,8 @@ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
57
57
  updateFormDataExternally = _ref.updateFormDataExternally,
58
58
  inputTitle = _ref.inputTitle,
59
59
  _ref$checkBaiscError = _ref.checkBaiscError,
60
- checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
60
+ checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError,
61
+ color = _ref.color;
61
62
  var _useState = (0, _react.useState)((0, _utils.convertHHMMSSFF_to_HHMMSSmmm)(inputValue, frameRate) || "00:00:00.000"),
62
63
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
63
64
  customInputValue = _useState2[0],
@@ -189,7 +190,7 @@ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
189
190
  };
190
191
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
191
192
  onClick: crossClicked
192
- }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
193
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
193
194
  name: "cross",
194
195
  width: 7,
195
196
  height: 7
@@ -197,6 +198,7 @@ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
197
198
  name: inputFieldType,
198
199
  theme: theme,
199
200
  width: width,
201
+ color: color,
200
202
  value: customInputValue,
201
203
  onFocus: onFocus,
202
204
  onBlur: onBlurFn,
package/atoms/timeCodeInput/timeCodeMainInput.js CHANGED
@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
13
13
  var _utils = require("../../_helpers/utils");
14
14
  var _tokens = require("@desynova-digital/tokens");
15
- var _components = require("@desynova-digital/components");
15
+ var _icon = _interopRequireDefault(require("../icon"));
16
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
17
17
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
20
20
  var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n font-size: 12px;\n /* color: ", "; */\n color: ", ";\n text-align: left;\n padding: 0;\n border: none;\n outline: none;\n background: transparent;\n &:hover {\n color: ", ";\n }\n /* width: ", "; */\n max-width: 73px;\n border-bottom: ", ";\n padding-bottom: 1px;\n"])), function (props) {
21
21
  return props.isError ? "#FFFFFF" : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? "#FF6C56" : "#FFFFFF";
22
22
  }, function (props) {
23
- return props.isValid ? "#FFFFFF" : "#FF6C56";
23
+ return props.isValid ? props.color || "#FFFFFF" : "#FF6C56";
24
24
  }, function (props) {
25
25
  return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : "rgb(0 206 198)";
26
26
  }, function (props) {
@@ -57,7 +57,8 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
57
57
  updateFormDataExternally = _ref.updateFormDataExternally,
58
58
  inputTitle = _ref.inputTitle,
59
59
  _ref$checkBaiscError = _ref.checkBaiscError,
60
- checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
60
+ checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError,
61
+ color = _ref.color;
61
62
  var _useState = (0, _react.useState)(inputValue || "00:00:00:00"),
62
63
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
63
64
  customInputValue = _useState2[0],
@@ -190,7 +191,7 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
190
191
  };
191
192
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
192
193
  onClick: crossClicked
193
- }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
194
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
194
195
  name: "cross",
195
196
  width: 7,
196
197
  height: 7
@@ -199,6 +200,7 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
199
200
  id: inputFieldType,
200
201
  theme: theme,
201
202
  width: width,
203
+ color: color,
202
204
  ref: inputRef,
203
205
  value: customInputValue,
204
206
  onFocus: onFocus,
package/atoms/timeCodeInput/timeCodeStandardInput.js CHANGED
@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
13
13
  var _utils = require("../../_helpers/utils");
14
14
  var _tokens = require("@desynova-digital/tokens");
15
- var _components = require("@desynova-digital/components");
15
+ var _icon = _interopRequireDefault(require("../icon"));
16
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
17
17
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
20
20
  var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n font-size: 12px;\n /* color: ", "; */\n color: ", ";\n text-align: left;\n padding: 0;\n border: none;\n outline: none;\n background: transparent;\n &:hover {\n color: ", ";\n }\n /* width: ", "; */\n max-width: 53px;\nborder-bottom: ", ";\n padding-bottom: 1px;\n"])), function (props) {
21
21
  return props.isError ? "#FFFFFF" : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? "#FF6C56" : "#FFFFFF";
22
22
  }, function (props) {
23
- return props.isValid ? "#FFFFFF" : "#FF6C56";
23
+ return props.isValid ? props.color || "#FFFFFF" : "#FF6C56";
24
24
  }, function (props) {
25
25
  return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : "rgb(0 206 198)";
26
26
  }, function (props) {
@@ -58,7 +58,8 @@ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
58
58
  updateFormDataExternally = _ref.updateFormDataExternally,
59
59
  inputTitle = _ref.inputTitle,
60
60
  _ref$checkBaiscError = _ref.checkBaiscError,
61
- checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
61
+ checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError,
62
+ color = _ref.color;
62
63
  var _useState = (0, _react.useState)((0, _utils.convertHHMMSSFF_to_HHMMSS)(inputValue, frameRate) || "00:00:00"),
63
64
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
64
65
  customInputValue = _useState2[0],
@@ -196,7 +197,7 @@ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
196
197
  };
197
198
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDiv, null, inputTitle && /*#__PURE__*/_react["default"].createElement(InputHeading, null, inputTitle), showCross && /*#__PURE__*/_react["default"].createElement(CrossIconWrapper, {
198
199
  onClick: crossClicked
199
- }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
200
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
200
201
  name: "cross",
201
202
  width: 7,
202
203
  height: 7
@@ -205,6 +206,7 @@ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
205
206
  theme: theme,
206
207
  width: width,
207
208
  ref: inputRef,
209
+ color: color,
208
210
  value: customInputValue,
209
211
  onFocus: onFocus,
210
212
  onBlur: onBlurFn,
package/molecules/richTextInputV2/RichTextInputV2.js CHANGED
@@ -115,9 +115,9 @@ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
115
115
  var quill = new _quill["default"](quillRef.current, {
116
116
  theme: "snow",
117
117
  placeholder: placeholder,
118
+ readOnly: isDisabled,
118
119
  modules: {
119
120
  toolbar: false,
120
- readOnly: isDisabled,
121
121
  keyboard: {
122
122
  bindings: {
123
123
  // This will overwrite the default binding for Tab
@@ -199,6 +199,11 @@ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
199
199
  quillRef.current.innerHTML = "";
200
200
  };
201
201
  }, []);
202
+ (0, _react.useEffect)(function () {
203
+ if (quillInstance.current) {
204
+ quillInstance.current.enable(!isDisabled);
205
+ }
206
+ }, [isDisabled]);
202
207
  (0, _react.useEffect)(function () {
203
208
  if (quillInstance.current) {
204
209
  var editorContainer = quillInstance.current.root;
@@ -206,7 +211,10 @@ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
206
211
  handleSave(html);
207
212
  }, 0);
208
213
  var handleKeyDown = function handleKeyDown(event) {
209
- if (event.key === "Enter" && !event.altKey) {
214
+ if (event.key === "Enter") {
215
+ if (event.altKey || event.metaKey) {
216
+ return;
217
+ }
210
218
  event.preventDefault();
211
219
  event.stopPropagation();
212
220
  var html = quillInstance.current.getSemanticHTML();
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.2.1",
3
+ "version": "9.2.3",
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.2.1",
10
+ "@desynova-digital/tokens": "9.2.3",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },