@desynova-digital/components 9.1.0 → 9.1.1

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 (4) hide show
  1. package/atoms/label/label.js +26 -26
  2. package/molecules/richTextInput/RichTextInput.js +1 -1
  3. package/molecules/richTextInput/RichTextInput.story.js +164 -17
  4. package/package.json +2 -2
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
@@ -251,7 +251,7 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
251
251
  showLengthCount: showLengthCount || false
252
252
  }), /*#__PURE__*/_react["default"].createElement("div", {
253
253
  ref: quillRef
254
- })), label && quillInstance.current && /*#__PURE__*/_react["default"].createElement("label", {
254
+ })), label && /*#__PURE__*/_react["default"].createElement("label", {
255
255
  htmlFor: props.id,
256
256
  className: charCount || focus ? "floaton" : ""
257
257
  }, "".concat(label).concat(props.required ? "*" : "")), errorMessage && /*#__PURE__*/_react["default"].createElement(RichTextInputError, {
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.1",
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.1",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },