@pareto-engineering/design-system 2.0.0-alpha.2 → 2.0.0-alpha.6

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 (128) hide show
  1. package/dist/cjs/a/AnimatedCounter/AnimatedCounter.js +16 -29
  2. package/dist/cjs/a/AnimatedCounter/styles.scss +3 -11
  3. package/dist/cjs/a/Conversation/styles.scss +2 -0
  4. package/dist/cjs/a/GradientBackground/GradientBackground.js +140 -0
  5. package/dist/cjs/a/GradientBackground/index.js +15 -0
  6. package/dist/cjs/a/GradientBackground/styles.scss +191 -0
  7. package/dist/cjs/a/People/People.js +15 -7
  8. package/dist/cjs/a/People/common/Person/Person.js +11 -4
  9. package/dist/cjs/a/People/styles.scss +13 -15
  10. package/dist/cjs/a/Shapes/Shapes.js +163 -0
  11. package/dist/cjs/a/{RatingsInput/common/Rating → Shapes}/index.js +3 -3
  12. package/dist/cjs/a/Shapes/styles.scss +222 -0
  13. package/dist/cjs/a/TeamInfo/styles.scss +2 -2
  14. package/dist/cjs/a/index.js +9 -1
  15. package/dist/cjs/b/Button/styles.scss +38 -19
  16. package/dist/cjs/{a/RatingsInput/RatingsInput.js → b/Metrics/Metrics.js} +30 -29
  17. package/dist/cjs/{a/RatingsInput → b/Metrics}/index.js +3 -3
  18. package/dist/cjs/b/Metrics/styles.scss +91 -0
  19. package/dist/cjs/b/Page/common/Section/Section.js +42 -5
  20. package/dist/cjs/b/Page/styles.scss +8 -2
  21. package/dist/cjs/b/QuestionDropdown/styles.scss +1 -1
  22. package/dist/cjs/b/index.js +9 -1
  23. package/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +1 -1
  24. package/dist/cjs/experimental/GradientBackground/GradientBackground.js +98 -0
  25. package/dist/cjs/experimental/GradientBackground/index.js +15 -0
  26. package/dist/cjs/experimental/GradientBackground/styles.scss +64 -0
  27. package/dist/cjs/experimental/index.js +13 -0
  28. package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +1 -1
  29. package/dist/cjs/f/fields/RatingsInput/common/Rating/Rating.js +2 -2
  30. package/dist/cjs/f/fields/SelectInput/styles.scss +3 -3
  31. package/dist/cjs/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +2 -2
  32. package/dist/cjs/f/fields/TaskRecommendationInput/styles.scss +4 -0
  33. package/dist/cjs/f/fields/TextInput/styles.scss +3 -3
  34. package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +1 -1
  35. package/dist/cjs/form.scss +1 -1
  36. package/dist/es/a/AnimatedCounter/AnimatedCounter.js +17 -30
  37. package/dist/es/a/AnimatedCounter/styles.scss +3 -11
  38. package/dist/es/a/Conversation/styles.scss +2 -0
  39. package/dist/es/a/GradientBackground/GradientBackground.js +118 -0
  40. package/dist/es/a/GradientBackground/index.js +2 -0
  41. package/dist/es/a/GradientBackground/styles.scss +191 -0
  42. package/dist/es/a/People/People.js +14 -7
  43. package/dist/es/a/People/common/Person/Person.js +11 -4
  44. package/dist/es/a/People/styles.scss +13 -15
  45. package/dist/es/a/Shapes/Shapes.js +141 -0
  46. package/dist/es/a/{RatingsInput/common/Rating → Shapes}/index.js +1 -1
  47. package/dist/es/a/Shapes/styles.scss +222 -0
  48. package/dist/es/a/TeamInfo/styles.scss +2 -2
  49. package/dist/es/a/index.js +2 -1
  50. package/dist/es/b/Button/styles.scss +38 -19
  51. package/dist/es/b/Metrics/Metrics.js +72 -0
  52. package/dist/es/b/Metrics/index.js +2 -0
  53. package/dist/es/b/Metrics/styles.scss +91 -0
  54. package/dist/es/b/Page/common/Section/Section.js +41 -4
  55. package/dist/es/b/Page/styles.scss +8 -2
  56. package/dist/es/b/QuestionDropdown/styles.scss +1 -1
  57. package/dist/es/b/index.js +2 -1
  58. package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +1 -1
  59. package/dist/es/experimental/GradientBackground/GradientBackground.js +76 -0
  60. package/dist/es/experimental/GradientBackground/index.js +2 -0
  61. package/dist/es/experimental/GradientBackground/styles.scss +64 -0
  62. package/dist/es/experimental/index.js +1 -0
  63. package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +1 -1
  64. package/dist/es/f/fields/RatingsInput/common/Rating/Rating.js +2 -2
  65. package/dist/es/f/fields/SelectInput/styles.scss +3 -3
  66. package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +2 -2
  67. package/dist/es/f/fields/TaskRecommendationInput/styles.scss +4 -0
  68. package/dist/es/f/fields/TextInput/styles.scss +3 -3
  69. package/dist/es/f/fields/TextareaInput/TextareaInput.js +1 -1
  70. package/dist/es/form.scss +1 -1
  71. package/package.json +3 -3
  72. package/src/__snapshots__/Storyshots.test.js.snap +3654 -339
  73. package/src/local.scss +3 -0
  74. package/src/stories/a/AnimatedCounter.stories.jsx +9 -5
  75. package/src/stories/a/ContentCard.stories.jsx +1 -1
  76. package/src/stories/a/Conversation.stories.jsx +1 -1
  77. package/src/stories/a/People.stories.jsx +25 -1
  78. package/src/stories/a/ProgressBar.stories.jsx +1 -1
  79. package/src/stories/a/Quote.stories.jsx +1 -1
  80. package/src/stories/a/Shapes.stories.jsx +125 -0
  81. package/src/stories/a/Spinner.stories.jsx +1 -1
  82. package/src/stories/b/Button.stories.jsx +57 -51
  83. package/src/stories/b/Metrics.stories.jsx +62 -0
  84. package/src/stories/b/Page.stories.jsx +27 -1
  85. package/src/stories/b/ThemeSelector.stories.jsx +1 -1
  86. package/src/stories/b/Title.stories.jsx +1 -1
  87. package/src/stories/c/ContentSlides.stories.jsx +2 -2
  88. package/src/stories/colors.js +5 -3
  89. package/src/stories/f/CheckboxInput.stories.jsx +1 -1
  90. package/src/stories/f/TaskRecommendationInput.stories.jsx +1 -1
  91. package/src/stories/f/TextInput.stories.jsx +4 -4
  92. package/src/stories/f/TextareaInput.stories.jsx +2 -2
  93. package/src/ui/a/AnimatedCounter/AnimatedCounter.jsx +21 -27
  94. package/src/ui/a/AnimatedCounter/styles.scss +3 -11
  95. package/src/ui/a/Conversation/styles.scss +2 -0
  96. package/src/ui/a/People/People.jsx +12 -4
  97. package/src/ui/a/People/common/Person/Person.jsx +7 -1
  98. package/src/ui/a/People/styles.scss +13 -15
  99. package/src/ui/a/Shapes/Shapes.jsx +181 -0
  100. package/src/ui/a/Shapes/index.js +2 -0
  101. package/src/ui/a/Shapes/styles.scss +222 -0
  102. package/src/ui/a/TeamInfo/styles.scss +2 -2
  103. package/src/ui/a/index.js +1 -0
  104. package/src/ui/b/Button/styles.scss +38 -19
  105. package/src/ui/b/Metrics/Metrics.jsx +93 -0
  106. package/src/ui/b/Metrics/index.js +2 -0
  107. package/src/ui/b/Metrics/styles.scss +91 -0
  108. package/src/ui/b/Page/common/Section/Section.jsx +51 -2
  109. package/src/ui/b/Page/styles.scss +8 -2
  110. package/src/ui/b/QuestionDropdown/styles.scss +1 -1
  111. package/src/ui/b/index.js +1 -0
  112. package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx +1 -1
  113. package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +1 -1
  114. package/src/ui/f/fields/RatingsInput/common/Rating/Rating.jsx +2 -2
  115. package/src/ui/f/fields/SelectInput/styles.scss +3 -3
  116. package/src/ui/f/fields/TaskRecommendationInput/TaskRecommendationInput.jsx +2 -2
  117. package/src/ui/f/fields/TaskRecommendationInput/styles.scss +4 -0
  118. package/src/ui/f/fields/TextInput/styles.scss +3 -3
  119. package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +1 -1
  120. package/src/ui/form.scss +1 -1
  121. package/dist/cjs/a/RatingsInput/common/Rating/Rating.js +0 -120
  122. package/dist/cjs/a/RatingsInput/common/index.js +0 -13
  123. package/dist/cjs/a/RatingsInput/styles.scss +0 -35
  124. package/dist/es/a/RatingsInput/RatingsInput.js +0 -72
  125. package/dist/es/a/RatingsInput/common/Rating/Rating.js +0 -102
  126. package/dist/es/a/RatingsInput/common/index.js +0 -1
  127. package/dist/es/a/RatingsInput/index.js +0 -2
  128. package/dist/es/a/RatingsInput/styles.scss +0 -35
@@ -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 +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
-