@pareto-engineering/design-system 0.0.1-alpha.67 → 0.0.1-alpha.70

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 (94) hide show
  1. package/config/global-setup.js +3 -0
  2. package/dist/cjs/a/Timestamp/Timestamp.js +139 -0
  3. package/dist/cjs/a/{RatingsInput/common/Rating → Timestamp}/index.js +3 -3
  4. package/dist/cjs/a/Timestamp/styles.scss +7 -0
  5. package/dist/cjs/a/index.js +9 -1
  6. package/dist/cjs/f/FormInput/FormInput.js +109 -0
  7. package/dist/cjs/{a/RatingsInput → f/FormInput}/index.js +3 -3
  8. package/dist/cjs/f/common/Label/Label.js +10 -3
  9. package/dist/cjs/f/common/Label/styles.scss +3 -3
  10. package/dist/cjs/f/fields/CheckboxInput/CheckboxInput.js +3 -1
  11. package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +32 -11
  12. package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js +10 -3
  13. package/dist/cjs/f/fields/ChoicesInput/styles.scss +32 -29
  14. package/dist/cjs/f/fields/RadioInput/RadioInput.js +3 -1
  15. package/dist/cjs/f/fields/RatingsInput/RatingsInput.js +3 -1
  16. package/dist/cjs/f/fields/SelectInput/SelectInput.js +15 -5
  17. package/dist/cjs/{a/RatingsInput/common/Rating/Rating.js → f/fields/TaskRecommendationInput/TaskRecommendationInput.js} +57 -46
  18. package/dist/cjs/f/fields/TaskRecommendationInput/index.js +15 -0
  19. package/{src/ui/f/fields/TaskRecommendation → dist/cjs/f/fields/TaskRecommendationInput}/styles.scss +1 -1
  20. package/dist/cjs/f/fields/TextInput/TextInput.js +15 -5
  21. package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +151 -0
  22. package/dist/cjs/f/fields/TextareaInput/index.js +15 -0
  23. package/{src/ui/f/fields/TextArea → dist/cjs/f/fields/TextareaInput}/styles.scss +1 -1
  24. package/dist/cjs/f/fields/index.js +6 -6
  25. package/dist/cjs/f/index.js +14 -1
  26. package/dist/es/a/Timestamp/Timestamp.js +122 -0
  27. package/dist/es/a/Timestamp/index.js +2 -0
  28. package/dist/es/a/Timestamp/styles.scss +7 -0
  29. package/dist/es/a/index.js +2 -1
  30. package/dist/es/f/FormInput/FormInput.js +84 -0
  31. package/dist/es/f/FormInput/index.js +2 -0
  32. package/dist/es/f/common/Label/Label.js +10 -3
  33. package/dist/es/f/common/Label/styles.scss +3 -3
  34. package/dist/es/f/fields/CheckboxInput/CheckboxInput.js +2 -2
  35. package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +32 -13
  36. package/dist/es/f/fields/ChoicesInput/common/Choice/Choice.js +10 -3
  37. package/dist/es/f/fields/ChoicesInput/styles.scss +32 -29
  38. package/dist/es/f/fields/RadioInput/RadioInput.js +2 -2
  39. package/dist/es/f/fields/RatingsInput/RatingsInput.js +2 -2
  40. package/dist/es/f/fields/SelectInput/SelectInput.js +14 -6
  41. package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +111 -0
  42. package/dist/es/f/fields/TaskRecommendationInput/index.js +2 -0
  43. package/dist/es/f/fields/TaskRecommendationInput/styles.scss +37 -0
  44. package/dist/es/f/fields/TextInput/TextInput.js +14 -6
  45. package/dist/es/f/fields/TextareaInput/TextareaInput.js +132 -0
  46. package/dist/es/f/fields/TextareaInput/index.js +2 -0
  47. package/dist/es/f/fields/TextareaInput/styles.scss +19 -0
  48. package/dist/es/f/fields/index.js +2 -2
  49. package/dist/es/f/index.js +2 -1
  50. package/jest.config.js +2 -1
  51. package/package.json +1 -1
  52. package/src/__snapshots__/Storyshots.test.js.snap +1204 -383
  53. package/src/stories/a/Timestamp.stories.jsx +102 -0
  54. package/src/stories/f/ChoicesInput.stories.jsx +54 -6
  55. package/src/stories/f/FormInput.stories.jsx +187 -0
  56. package/src/stories/f/SelectInput.stories.jsx +14 -0
  57. package/src/stories/f/{TaskRecommendation.stories.jsx → TaskRecommendationInput.stories.jsx} +4 -4
  58. package/src/stories/f/TextInput.stories.jsx +10 -0
  59. package/src/stories/f/{TextArea.stories.jsx → TextareaInput.stories.jsx} +15 -5
  60. package/src/ui/a/Timestamp/Timestamp.jsx +168 -0
  61. package/src/ui/a/Timestamp/index.js +2 -0
  62. package/src/ui/a/Timestamp/styles.scss +7 -0
  63. package/src/ui/a/index.js +1 -0
  64. package/src/ui/f/FormInput/FormInput.jsx +121 -0
  65. package/src/ui/f/FormInput/index.js +2 -0
  66. package/src/ui/f/common/Label/Label.jsx +10 -2
  67. package/src/ui/f/common/Label/styles.scss +3 -3
  68. package/src/ui/f/fields/CheckboxInput/CheckboxInput.jsx +2 -2
  69. package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +37 -17
  70. package/src/ui/f/fields/ChoicesInput/common/Choice/Choice.jsx +6 -0
  71. package/src/ui/f/fields/ChoicesInput/styles.scss +32 -29
  72. package/src/ui/f/fields/RadioInput/RadioInput.jsx +2 -2
  73. package/src/ui/f/fields/RatingsInput/RatingsInput.jsx +2 -2
  74. package/src/ui/f/fields/SelectInput/SelectInput.jsx +9 -4
  75. package/src/ui/f/fields/{TaskRecommendation/TaskRecommendation.jsx → TaskRecommendationInput/TaskRecommendationInput.jsx} +6 -6
  76. package/src/ui/f/fields/TaskRecommendationInput/index.js +2 -0
  77. package/src/ui/f/fields/TaskRecommendationInput/styles.scss +37 -0
  78. package/src/ui/f/fields/TextInput/TextInput.jsx +10 -3
  79. package/src/ui/f/fields/{TextArea/TextArea.jsx → TextareaInput/TextareaInput.jsx} +13 -6
  80. package/src/ui/f/fields/TextareaInput/index.js +2 -0
  81. package/src/ui/f/fields/TextareaInput/styles.scss +19 -0
  82. package/src/ui/f/fields/index.js +2 -2
  83. package/src/ui/f/index.js +1 -0
  84. package/dist/cjs/a/RatingsInput/RatingsInput.js +0 -88
  85. package/dist/cjs/a/RatingsInput/common/index.js +0 -13
  86. package/dist/cjs/a/RatingsInput/styles.scss +0 -35
  87. package/dist/es/a/RatingsInput/RatingsInput.js +0 -72
  88. package/dist/es/a/RatingsInput/common/Rating/Rating.js +0 -102
  89. package/dist/es/a/RatingsInput/common/Rating/index.js +0 -2
  90. package/dist/es/a/RatingsInput/common/index.js +0 -1
  91. package/dist/es/a/RatingsInput/index.js +0 -2
  92. package/dist/es/a/RatingsInput/styles.scss +0 -35
  93. package/src/ui/f/fields/TaskRecommendation/index.js +0 -2
  94. package/src/ui/f/fields/TextArea/index.js +0 -2
@@ -2,7 +2,7 @@ export { TextInput } from './TextInput'
2
2
  export { SelectInput } from './SelectInput'
3
3
  export { RadioInput } from './RadioInput'
4
4
  export { CheckboxInput } from './CheckboxInput'
5
- export { TaskRecommendation } from './TaskRecommendation'
5
+ export { TaskRecommendationInput } from './TaskRecommendationInput'
6
6
  export { ChoicesInput } from './ChoicesInput'
7
- export { TextArea } from './TextArea'
7
+ export { TextareaInput } from './TextareaInput'
8
8
  export { RatingsInput } from './RatingsInput'
package/src/ui/f/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './common'
2
2
  export * from './fields'
3
+ export { FormInput } from './FormInput'
@@ -1,88 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var React = _interopRequireWildcard(require("react"));
9
-
10
- var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
- var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
13
-
14
- var _common = require("./common");
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
-
20
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
-
22
- var baseClassName = _bem.default.base;
23
- var componentClassName = 'ratings-input';
24
- /**
25
- * This is the component description.
26
- */
27
-
28
- var RatingsInput = _ref => {
29
- var {
30
- id,
31
- className: userClassName,
32
- style,
33
- name,
34
- ratingCount // ...otherProps
35
-
36
- } = _ref;
37
- (0, React.useLayoutEffect)(() => {
38
- Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
39
- }, []);
40
- var [hover, setHover] = (0, React.useState)(null);
41
- return /*#__PURE__*/React.createElement("div", {
42
- id: id,
43
- className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
44
- style: style // {...otherProps}
45
-
46
- }, [...Array(ratingCount)].map((_, index) => {
47
- var ratingValue = index + 1;
48
- return /*#__PURE__*/React.createElement(_common.Rating, {
49
- key: ratingValue,
50
- ratingId: "".concat(name, "-").concat(ratingValue),
51
- value: ratingValue,
52
- name: name,
53
- hover: hover,
54
- setHover: setHover
55
- });
56
- }));
57
- };
58
-
59
- RatingsInput.propTypes = {
60
- /**
61
- * The HTML id for this element
62
- */
63
- id: _propTypes.default.string,
64
-
65
- /**
66
- * The HTML class names for this element
67
- */
68
- className: _propTypes.default.string,
69
-
70
- /**
71
- * The React-written, css properties for this element.
72
- */
73
- style: _propTypes.default.objectOf(_propTypes.default.string),
74
-
75
- /**
76
- * The number of ratings input stars to be displayed
77
- */
78
- ratingCount: _propTypes.default.number,
79
-
80
- /**
81
- * Name of the rating input
82
- */
83
- name: _propTypes.default.string
84
- };
85
- RatingsInput.defaultProps = {// someProp:false
86
- };
87
- var _default = RatingsInput;
88
- exports.default = _default;
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "Rating", {
7
- enumerable: true,
8
- get: function get() {
9
- return _Rating.Rating;
10
- }
11
- });
12
-
13
- var _Rating = require("./Rating");
@@ -1,35 +0,0 @@
1
- /* @pareto-engineering/generator-front 1.0.12 */
2
- @use "@pareto-engineering/bem";
3
-
4
- $default-rating-icon-margin: .5em;
5
- $default-padding: .2em;
6
- $default-transition: all .2s;
7
-
8
- .#{bem.$base}.ratings-input {
9
- display: flex;
10
-
11
- >:not(:first-child) {
12
- margin-left: $default-rating-icon-margin;
13
- }
14
-
15
- .#{bem.$base}.rating {
16
- display: flex;
17
-
18
- input {
19
- opacity: 0;
20
- position: absolute;
21
- visibility: none;
22
- z-index: -1;
23
- }
24
-
25
- label {
26
- padding: $default-padding;
27
- transition: $default-transition;
28
- cursor: pointer;
29
- }
30
- }
31
- }
32
-
33
-
34
-
35
-
@@ -1,72 +0,0 @@
1
- /* @pareto-engineering/generator-front 1.0.12 */
2
- import * as React from 'react';
3
- import { useState, useLayoutEffect } from 'react';
4
- import PropTypes from 'prop-types';
5
- import styleNames from '@pareto-engineering/bem'; // Local Definitions
6
-
7
- import { Rating } from "./common";
8
- const baseClassName = styleNames.base;
9
- const componentClassName = 'ratings-input';
10
- /**
11
- * This is the component description.
12
- */
13
-
14
- const RatingsInput = ({
15
- id,
16
- className: userClassName,
17
- style,
18
- name,
19
- ratingCount // ...otherProps
20
-
21
- }) => {
22
- useLayoutEffect(() => {
23
- import("./styles.scss");
24
- }, []);
25
- const [hover, setHover] = useState(null);
26
- return /*#__PURE__*/React.createElement("div", {
27
- id: id,
28
- className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
29
- style: style // {...otherProps}
30
-
31
- }, [...Array(ratingCount)].map((_, index) => {
32
- const ratingValue = index + 1;
33
- return /*#__PURE__*/React.createElement(Rating, {
34
- key: ratingValue,
35
- ratingId: `${name}-${ratingValue}`,
36
- value: ratingValue,
37
- name: name,
38
- hover: hover,
39
- setHover: setHover
40
- });
41
- }));
42
- };
43
-
44
- RatingsInput.propTypes = {
45
- /**
46
- * The HTML id for this element
47
- */
48
- id: PropTypes.string,
49
-
50
- /**
51
- * The HTML class names for this element
52
- */
53
- className: PropTypes.string,
54
-
55
- /**
56
- * The React-written, css properties for this element.
57
- */
58
- style: PropTypes.objectOf(PropTypes.string),
59
-
60
- /**
61
- * The number of ratings input stars to be displayed
62
- */
63
- ratingCount: PropTypes.number,
64
-
65
- /**
66
- * Name of the rating input
67
- */
68
- name: PropTypes.string
69
- };
70
- RatingsInput.defaultProps = {// someProp:false
71
- };
72
- export default RatingsInput;
@@ -1,102 +0,0 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- /* @pareto-engineering/generator-front 1.0.12 */
4
- import * as React from 'react';
5
- import PropTypes from 'prop-types';
6
- import { useField } from 'formik';
7
- import styleNames from '@pareto-engineering/bem'; // Local Definitions
8
-
9
- const baseClassName = styleNames.base;
10
- const componentClassName = 'rating';
11
- /**
12
- * This is the component description.
13
- */
14
-
15
- const Rating = ({
16
- id,
17
- className: userClassName,
18
- style,
19
- value,
20
- name,
21
- ratingId,
22
- hover,
23
- setHover,
24
- activeBackgroundColor,
25
- inactiveBackgroundColor // ...otherProps
26
-
27
- }) => {
28
- const [field] = useField(name);
29
- return /*#__PURE__*/React.createElement("div", {
30
- id: id,
31
- className: [baseClassName, componentClassName, userClassName, `x-${activeBackgroundColor}`, `y-${inactiveBackgroundColor}`].filter(e => e).join(' '),
32
- style: style
33
- }, /*#__PURE__*/React.createElement("label", {
34
- htmlFor: ratingId,
35
- onMouseEnter: () => setHover(value),
36
- onMouseLeave: () => setHover(null)
37
- }, ' ', /*#__PURE__*/React.createElement("span", {
38
- className: ['f-icons', value <= (hover || Number(field.value)) ? 'c-x' : 'c-dark-y'].filter(e => e).join(' ')
39
- }, "[")), /*#__PURE__*/React.createElement("input", _extends({}, field, {
40
- type: "radio",
41
- id: ratingId,
42
- name: name,
43
- value: value
44
- })));
45
- };
46
-
47
- Rating.propTypes = {
48
- /**
49
- * The HTML id for this element
50
- */
51
- id: PropTypes.string,
52
-
53
- /**
54
- * The HTML class names for this element
55
- */
56
- className: PropTypes.string,
57
-
58
- /**
59
- * The React-written, css properties for this element.
60
- */
61
- style: PropTypes.objectOf(PropTypes.string),
62
-
63
- /**
64
- * The value of each an every rating star
65
- */
66
- value: PropTypes.number,
67
-
68
- /**
69
- * The current hover value
70
- */
71
- hover: PropTypes.number,
72
-
73
- /**
74
- * Function to update the hover value
75
- */
76
- setHover: PropTypes.func,
77
-
78
- /**
79
- * Unique Id for each rating star
80
- */
81
- ratingId: PropTypes.string,
82
-
83
- /**
84
- * Name of the rating input
85
- */
86
- name: PropTypes.string,
87
-
88
- /**
89
- * The start rating backgriund color when hovered or clicked
90
- */
91
- activeBackgroundColor: PropTypes.string,
92
-
93
- /**
94
- * The start rating backgriund color when not hovered and not clicked
95
- */
96
- inactiveBackgroundColor: PropTypes.string
97
- };
98
- Rating.defaultProps = {
99
- activeBackgroundColor: 'secondary2',
100
- inactiveBackgroundColor: 'background'
101
- };
102
- export default Rating;
@@ -1,2 +0,0 @@
1
- /* @pareto-engineering/generator-front 1.0.12 */
2
- export { default as Rating } from "./Rating";
@@ -1 +0,0 @@
1
- export { Rating } from "./Rating";
@@ -1,2 +0,0 @@
1
- /* @pareto-engineering/generator-front 1.0.12 */
2
- export { default as RatingsInput } from "./RatingsInput";
@@ -1,35 +0,0 @@
1
- /* @pareto-engineering/generator-front 1.0.12 */
2
- @use "@pareto-engineering/bem";
3
-
4
- $default-rating-icon-margin: .5em;
5
- $default-padding: .2em;
6
- $default-transition: all .2s;
7
-
8
- .#{bem.$base}.ratings-input {
9
- display: flex;
10
-
11
- >:not(:first-child) {
12
- margin-left: $default-rating-icon-margin;
13
- }
14
-
15
- .#{bem.$base}.rating {
16
- display: flex;
17
-
18
- input {
19
- opacity: 0;
20
- position: absolute;
21
- visibility: none;
22
- z-index: -1;
23
- }
24
-
25
- label {
26
- padding: $default-padding;
27
- transition: $default-transition;
28
- cursor: pointer;
29
- }
30
- }
31
- }
32
-
33
-
34
-
35
-
@@ -1,2 +0,0 @@
1
- /* @pareto-engineering/generator-front 1.0.12 */
2
- export { default as TaskRecommendation } from './TaskRecommendation'
@@ -1,2 +0,0 @@
1
- /* @pareto-engineering/generator-front 1.0.12 */
2
- export { default as TextArea } from './TextArea'