@pareto-engineering/design-system 4.8.1 → 4.9.0

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.
@@ -36,7 +36,6 @@ $default-height: var(--notification-height, 5rem);
36
36
  > .message {
37
37
  font-size: calc(var(--s0) * 1rem);
38
38
  margin-left: calc($default-margin / 2);
39
- text-transform: capitalize;
40
39
  }
41
40
 
42
41
  > span {
@@ -135,7 +135,8 @@ const FileUpload = _ref => {
135
135
  fileIndex: indx,
136
136
  identifier: file?.id || file.name
137
137
  }),
138
- uploadStatus: uploadStatus?.[file?.name]
138
+ uploadStatus: uploadStatus?.[file?.name]?.status,
139
+ uploadProgress: uploadStatus?.[file?.name]?.progress
139
140
  })))));
140
141
  };
141
142
  FileUpload.propTypes = {
@@ -45,11 +45,10 @@ const Preview = _ref => {
45
45
  } = _ref;
46
46
  const isFileObject = file instanceof File;
47
47
  const type = isFileObject ? (0, _utils.getFileType)(file) : (0, _utils.getFileTypeFromUrl)(file?.url);
48
- const status = uploadStatus?.status;
49
- const statusColor = statusColorMap[status] ?? color;
50
- const isPending = status === 'pending';
48
+ const statusColor = statusColorMap[uploadStatus] ?? color;
49
+ const isPending = uploadStatus === 'pending';
51
50
  // isPreview means the file is uploaded and previewed while other files can still be uploaded
52
- const isSuccess = status === 'success' || file?.isPreview;
51
+ const isSuccess = uploadStatus === 'success' || file?.isPreview;
53
52
  const handlePreview = () => {
54
53
  if (!isFileObject) {
55
54
  window.open(file.url, '_blank');
@@ -124,6 +123,6 @@ Preview.propTypes = {
124
123
  };
125
124
  Preview.defaultProps = {
126
125
  color: 'green',
127
- uploadProgress: 45
126
+ uploadProgress: 0
128
127
  };
129
128
  var _default = exports.default = Preview;
@@ -43,14 +43,15 @@ const FormBuilder = _ref => {
43
43
  taskData
44
44
  // ...otherProps
45
45
  } = _ref;
46
+ const formattedJson = JSON.stringify(taskData, null, 2);
46
47
  return /*#__PURE__*/React.createElement("div", {
47
48
  id: id,
48
49
  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
49
50
  style: style
50
51
  // {...otherProps}
51
- }, taskData && /*#__PURE__*/React.createElement("div", {
52
- className: "task-data md-span-12 span-8"
53
- }, JSON.stringify(taskData)), mode === 'build' && /*#__PURE__*/React.createElement(_common.Builder, {
52
+ }, taskData && /*#__PURE__*/React.createElement("pre", {
53
+ className: "task-data md-span-12 span-8 s-1"
54
+ }, formattedJson), mode === 'build' && /*#__PURE__*/React.createElement(_common.Builder, {
54
55
  initialValues: initialBuilderValues,
55
56
  formBuilderId: formBuilderId,
56
57
  onSave: onBuilderFormSave,
@@ -14,10 +14,12 @@ $default-margin: var(--gap);
14
14
  border: $default-border;
15
15
  border-radius: $default-border-radius;
16
16
  color: var(--on-background-far);
17
+ height: $default-max-height;
17
18
  margin-bottom: $default-margin;
18
- max-height: $default-max-height;
19
19
  max-width: 100%;
20
20
  overflow: auto;
21
21
  padding: $default-padding;
22
+ resize: vertical;
23
+ text-wrap: wrap;
22
24
  }
23
25
  }
@@ -36,7 +36,6 @@ $default-height: var(--notification-height, 5rem);
36
36
  > .message {
37
37
  font-size: calc(var(--s0) * 1rem);
38
38
  margin-left: calc($default-margin / 2);
39
- text-transform: capitalize;
40
39
  }
41
40
 
42
41
  > span {
@@ -124,7 +124,8 @@ const FileUpload = ({
124
124
  fileIndex: indx,
125
125
  identifier: file?.id || file.name
126
126
  }),
127
- uploadStatus: uploadStatus?.[file?.name]
127
+ uploadStatus: uploadStatus?.[file?.name]?.status,
128
+ uploadProgress: uploadStatus?.[file?.name]?.progress
128
129
  })))));
129
130
  };
130
131
  FileUpload.propTypes = {
@@ -35,11 +35,10 @@ const Preview = ({
35
35
  }) => {
36
36
  const isFileObject = file instanceof File;
37
37
  const type = isFileObject ? getFileType(file) : getFileTypeFromUrl(file?.url);
38
- const status = uploadStatus?.status;
39
- const statusColor = statusColorMap[status] ?? color;
40
- const isPending = status === 'pending';
38
+ const statusColor = statusColorMap[uploadStatus] ?? color;
39
+ const isPending = uploadStatus === 'pending';
41
40
  // isPreview means the file is uploaded and previewed while other files can still be uploaded
42
- const isSuccess = status === 'success' || file?.isPreview;
41
+ const isSuccess = uploadStatus === 'success' || file?.isPreview;
43
42
  const handlePreview = () => {
44
43
  if (!isFileObject) {
45
44
  window.open(file.url, '_blank');
@@ -114,6 +113,6 @@ Preview.propTypes = {
114
113
  };
115
114
  Preview.defaultProps = {
116
115
  color: 'green',
117
- uploadProgress: 45
116
+ uploadProgress: 0
118
117
  };
119
118
  export default Preview;
@@ -32,28 +32,31 @@ const FormBuilder = ({
32
32
  handleFileDelete,
33
33
  taskData
34
34
  // ...otherProps
35
- }) => /*#__PURE__*/React.createElement("div", {
36
- id: id,
37
- className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
38
- style: style
39
- // {...otherProps}
40
- }, taskData && /*#__PURE__*/React.createElement("div", {
41
- className: "task-data md-span-12 span-8"
42
- }, JSON.stringify(taskData)), mode === 'build' && /*#__PURE__*/React.createElement(Builder, {
43
- initialValues: initialBuilderValues,
44
- formBuilderId: formBuilderId,
45
- onSave: onBuilderFormSave,
46
- onError: onBuilderError,
47
- validate: onBuilderValidate
48
- }), mode === 'render' && /*#__PURE__*/React.createElement(Renderer, {
49
- formData: formData,
50
- onSave: onRendererFormSave,
51
- readOnly: readOnly,
52
- shouldSubmit: shouldSubmit,
53
- onError: onRendererError,
54
- fileUploadStatus: fileUploadStatus,
55
- handleFileDelete: handleFileDelete
56
- }));
35
+ }) => {
36
+ const formattedJson = JSON.stringify(taskData, null, 2);
37
+ return /*#__PURE__*/React.createElement("div", {
38
+ id: id,
39
+ className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
40
+ style: style
41
+ // {...otherProps}
42
+ }, taskData && /*#__PURE__*/React.createElement("pre", {
43
+ className: "task-data md-span-12 span-8 s-1"
44
+ }, formattedJson), mode === 'build' && /*#__PURE__*/React.createElement(Builder, {
45
+ initialValues: initialBuilderValues,
46
+ formBuilderId: formBuilderId,
47
+ onSave: onBuilderFormSave,
48
+ onError: onBuilderError,
49
+ validate: onBuilderValidate
50
+ }), mode === 'render' && /*#__PURE__*/React.createElement(Renderer, {
51
+ formData: formData,
52
+ onSave: onRendererFormSave,
53
+ readOnly: readOnly,
54
+ shouldSubmit: shouldSubmit,
55
+ onError: onRendererError,
56
+ fileUploadStatus: fileUploadStatus,
57
+ handleFileDelete: handleFileDelete
58
+ }));
59
+ };
57
60
  FormBuilder.propTypes = {
58
61
  /**
59
62
  * The HTML id for this element
@@ -14,10 +14,12 @@ $default-margin: var(--gap);
14
14
  border: $default-border;
15
15
  border-radius: $default-border-radius;
16
16
  color: var(--on-background-far);
17
+ height: $default-max-height;
17
18
  margin-bottom: $default-margin;
18
- max-height: $default-max-height;
19
19
  max-width: 100%;
20
20
  overflow: auto;
21
21
  padding: $default-padding;
22
+ resize: vertical;
23
+ text-wrap: wrap;
22
24
  }
23
25
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pareto-engineering/design-system",
3
- "version": "4.8.1",
3
+ "version": "4.9.0",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.js",
@@ -59,7 +59,7 @@
59
59
  "@lexical/selection": "0.12.2",
60
60
  "@lexical/table": "0.12.2",
61
61
  "@lexical/utils": "0.12.2",
62
- "@pareto-engineering/assets": "^4.2.3",
62
+ "@pareto-engineering/assets": "^4.9.0",
63
63
  "@pareto-engineering/bem": "^4.8.1",
64
64
  "@pareto-engineering/styles": "^4.2.0",
65
65
  "@pareto-engineering/utils": "^4.0.0",
@@ -82,5 +82,5 @@
82
82
  "relay-test-utils": "^15.0.0"
83
83
  },
84
84
  "browserslist": "> 2%",
85
- "gitHead": "602fbbfba2cc3017bbeb000da067c8ecac566728"
85
+ "gitHead": "198830358910af7c44d657ad846d3c7ce0967181"
86
86
  }
@@ -36,7 +36,6 @@ $default-height: var(--notification-height, 5rem);
36
36
  > .message {
37
37
  font-size: calc(var(--s0) * 1rem);
38
38
  margin-left: calc($default-margin / 2);
39
- text-transform: capitalize;
40
39
  }
41
40
 
42
41
  > span {
@@ -152,7 +152,8 @@ const FileUpload = ({
152
152
  fileIndex :indx,
153
153
  identifier:file?.id || file.name,
154
154
  })}
155
- uploadStatus={uploadStatus?.[file?.name]}
155
+ uploadStatus={uploadStatus?.[file?.name]?.status}
156
+ uploadProgress={uploadStatus?.[file?.name]?.progress}
156
157
  />
157
158
  ))}
158
159
  </div>
@@ -45,12 +45,11 @@ const Preview = ({
45
45
  const isFileObject = file instanceof File
46
46
  const type = isFileObject ? getFileType(file) : getFileTypeFromUrl(file?.url)
47
47
 
48
- const status = uploadStatus?.status
49
- const statusColor = statusColorMap[status] ?? color
48
+ const statusColor = statusColorMap[uploadStatus] ?? color
50
49
 
51
- const isPending = status === 'pending'
50
+ const isPending = uploadStatus === 'pending'
52
51
  // isPreview means the file is uploaded and previewed while other files can still be uploaded
53
- const isSuccess = status === 'success' || file?.isPreview
52
+ const isSuccess = uploadStatus === 'success' || file?.isPreview
54
53
 
55
54
  const handlePreview = () => {
56
55
  if (!isFileObject) {
@@ -179,7 +178,7 @@ Preview.propTypes = {
179
178
 
180
179
  Preview.defaultProps = {
181
180
  color :'green',
182
- uploadProgress:45,
181
+ uploadProgress:0,
183
182
  }
184
183
 
185
184
  export default Preview
@@ -37,48 +37,52 @@ const FormBuilder = ({
37
37
  handleFileDelete,
38
38
  taskData,
39
39
  // ...otherProps
40
- }) => (
41
- <div
42
- id={id}
43
- className={[
44
- baseClassName,
45
- componentClassName,
46
- userClassName,
47
- ]
48
- .filter((e) => e)
49
- .join(' ')}
50
- style={style}
51
- // {...otherProps}
52
- >
53
- {
54
- taskData && (
55
- <div className="task-data md-span-12 span-8">
56
- {JSON.stringify(taskData)}
57
- </div>
58
- )
59
- }
60
- {mode === 'build' && (
61
- <Builder
62
- initialValues={initialBuilderValues}
63
- formBuilderId={formBuilderId}
64
- onSave={onBuilderFormSave}
65
- onError={onBuilderError}
66
- validate={onBuilderValidate}
67
- />
68
- )}
69
- {mode === 'render' && (
70
- <Renderer
71
- formData={formData}
72
- onSave={onRendererFormSave}
73
- readOnly={readOnly}
74
- shouldSubmit={shouldSubmit}
75
- onError={onRendererError}
76
- fileUploadStatus={fileUploadStatus}
77
- handleFileDelete={handleFileDelete}
78
- />
79
- )}
80
- </div>
81
- )
40
+ }) => {
41
+ const formattedJson = JSON.stringify(taskData, null, 2)
42
+
43
+ return (
44
+ <div
45
+ id={id}
46
+ className={[
47
+ baseClassName,
48
+ componentClassName,
49
+ userClassName,
50
+ ]
51
+ .filter((e) => e)
52
+ .join(' ')}
53
+ style={style}
54
+ // {...otherProps}
55
+ >
56
+ {
57
+ taskData && (
58
+ <pre className="task-data md-span-12 span-8 s-1">
59
+ {formattedJson}
60
+ </pre>
61
+ )
62
+ }
63
+ {mode === 'build' && (
64
+ <Builder
65
+ initialValues={initialBuilderValues}
66
+ formBuilderId={formBuilderId}
67
+ onSave={onBuilderFormSave}
68
+ onError={onBuilderError}
69
+ validate={onBuilderValidate}
70
+ />
71
+ )}
72
+ {mode === 'render' && (
73
+ <Renderer
74
+ formData={formData}
75
+ onSave={onRendererFormSave}
76
+ readOnly={readOnly}
77
+ shouldSubmit={shouldSubmit}
78
+ onError={onRendererError}
79
+ fileUploadStatus={fileUploadStatus}
80
+ handleFileDelete={handleFileDelete}
81
+ />
82
+ )}
83
+ </div>
84
+ )
85
+ }
82
86
 
83
87
  FormBuilder.propTypes = {
84
88
  /**
@@ -14,10 +14,12 @@ $default-margin: var(--gap);
14
14
  border: $default-border;
15
15
  border-radius: $default-border-radius;
16
16
  color: var(--on-background-far);
17
+ height: $default-max-height;
17
18
  margin-bottom: $default-margin;
18
- max-height: $default-max-height;
19
19
  max-width: 100%;
20
20
  overflow: auto;
21
21
  padding: $default-padding;
22
+ resize: vertical;
23
+ text-wrap: wrap;
22
24
  }
23
25
  }