@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.
- package/dist/cjs/a/AnimatedCounter/AnimatedCounter.js +16 -29
- package/dist/cjs/a/AnimatedCounter/styles.scss +3 -11
- package/dist/cjs/a/Conversation/styles.scss +2 -0
- package/dist/cjs/a/GradientBackground/GradientBackground.js +140 -0
- package/dist/cjs/a/GradientBackground/index.js +15 -0
- package/dist/cjs/a/GradientBackground/styles.scss +191 -0
- package/dist/cjs/a/People/People.js +15 -7
- package/dist/cjs/a/People/common/Person/Person.js +11 -4
- package/dist/cjs/a/People/styles.scss +13 -15
- package/dist/cjs/a/Shapes/Shapes.js +163 -0
- package/dist/cjs/a/{RatingsInput/common/Rating → Shapes}/index.js +3 -3
- package/dist/cjs/a/Shapes/styles.scss +222 -0
- package/dist/cjs/a/TeamInfo/styles.scss +2 -2
- package/dist/cjs/a/index.js +9 -1
- package/dist/cjs/b/Button/styles.scss +38 -19
- package/dist/cjs/{a/RatingsInput/RatingsInput.js → b/Metrics/Metrics.js} +30 -29
- package/dist/cjs/{a/RatingsInput → b/Metrics}/index.js +3 -3
- package/dist/cjs/b/Metrics/styles.scss +91 -0
- package/dist/cjs/b/Page/common/Section/Section.js +42 -5
- package/dist/cjs/b/Page/styles.scss +8 -2
- package/dist/cjs/b/QuestionDropdown/styles.scss +1 -1
- package/dist/cjs/b/index.js +9 -1
- package/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +1 -1
- package/dist/cjs/experimental/GradientBackground/GradientBackground.js +98 -0
- package/dist/cjs/experimental/GradientBackground/index.js +15 -0
- package/dist/cjs/experimental/GradientBackground/styles.scss +64 -0
- package/dist/cjs/experimental/index.js +13 -0
- package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +1 -1
- package/dist/cjs/f/fields/RatingsInput/common/Rating/Rating.js +2 -2
- package/dist/cjs/f/fields/SelectInput/styles.scss +3 -3
- package/dist/cjs/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +2 -2
- package/dist/cjs/f/fields/TaskRecommendationInput/styles.scss +4 -0
- package/dist/cjs/f/fields/TextInput/styles.scss +3 -3
- package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +1 -1
- package/dist/cjs/form.scss +1 -1
- package/dist/es/a/AnimatedCounter/AnimatedCounter.js +17 -30
- package/dist/es/a/AnimatedCounter/styles.scss +3 -11
- package/dist/es/a/Conversation/styles.scss +2 -0
- package/dist/es/a/GradientBackground/GradientBackground.js +118 -0
- package/dist/es/a/GradientBackground/index.js +2 -0
- package/dist/es/a/GradientBackground/styles.scss +191 -0
- package/dist/es/a/People/People.js +14 -7
- package/dist/es/a/People/common/Person/Person.js +11 -4
- package/dist/es/a/People/styles.scss +13 -15
- package/dist/es/a/Shapes/Shapes.js +141 -0
- package/dist/es/a/{RatingsInput/common/Rating → Shapes}/index.js +1 -1
- package/dist/es/a/Shapes/styles.scss +222 -0
- package/dist/es/a/TeamInfo/styles.scss +2 -2
- package/dist/es/a/index.js +2 -1
- package/dist/es/b/Button/styles.scss +38 -19
- package/dist/es/b/Metrics/Metrics.js +72 -0
- package/dist/es/b/Metrics/index.js +2 -0
- package/dist/es/b/Metrics/styles.scss +91 -0
- package/dist/es/b/Page/common/Section/Section.js +41 -4
- package/dist/es/b/Page/styles.scss +8 -2
- package/dist/es/b/QuestionDropdown/styles.scss +1 -1
- package/dist/es/b/index.js +2 -1
- package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +1 -1
- package/dist/es/experimental/GradientBackground/GradientBackground.js +76 -0
- package/dist/es/experimental/GradientBackground/index.js +2 -0
- package/dist/es/experimental/GradientBackground/styles.scss +64 -0
- package/dist/es/experimental/index.js +1 -0
- package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +1 -1
- package/dist/es/f/fields/RatingsInput/common/Rating/Rating.js +2 -2
- package/dist/es/f/fields/SelectInput/styles.scss +3 -3
- package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +2 -2
- package/dist/es/f/fields/TaskRecommendationInput/styles.scss +4 -0
- package/dist/es/f/fields/TextInput/styles.scss +3 -3
- package/dist/es/f/fields/TextareaInput/TextareaInput.js +1 -1
- package/dist/es/form.scss +1 -1
- package/package.json +3 -3
- package/src/__snapshots__/Storyshots.test.js.snap +3654 -339
- package/src/local.scss +3 -0
- package/src/stories/a/AnimatedCounter.stories.jsx +9 -5
- package/src/stories/a/ContentCard.stories.jsx +1 -1
- package/src/stories/a/Conversation.stories.jsx +1 -1
- package/src/stories/a/People.stories.jsx +25 -1
- package/src/stories/a/ProgressBar.stories.jsx +1 -1
- package/src/stories/a/Quote.stories.jsx +1 -1
- package/src/stories/a/Shapes.stories.jsx +125 -0
- package/src/stories/a/Spinner.stories.jsx +1 -1
- package/src/stories/b/Button.stories.jsx +57 -51
- package/src/stories/b/Metrics.stories.jsx +62 -0
- package/src/stories/b/Page.stories.jsx +27 -1
- package/src/stories/b/ThemeSelector.stories.jsx +1 -1
- package/src/stories/b/Title.stories.jsx +1 -1
- package/src/stories/c/ContentSlides.stories.jsx +2 -2
- package/src/stories/colors.js +5 -3
- package/src/stories/f/CheckboxInput.stories.jsx +1 -1
- package/src/stories/f/TaskRecommendationInput.stories.jsx +1 -1
- package/src/stories/f/TextInput.stories.jsx +4 -4
- package/src/stories/f/TextareaInput.stories.jsx +2 -2
- package/src/ui/a/AnimatedCounter/AnimatedCounter.jsx +21 -27
- package/src/ui/a/AnimatedCounter/styles.scss +3 -11
- package/src/ui/a/Conversation/styles.scss +2 -0
- package/src/ui/a/People/People.jsx +12 -4
- package/src/ui/a/People/common/Person/Person.jsx +7 -1
- package/src/ui/a/People/styles.scss +13 -15
- package/src/ui/a/Shapes/Shapes.jsx +181 -0
- package/src/ui/a/Shapes/index.js +2 -0
- package/src/ui/a/Shapes/styles.scss +222 -0
- package/src/ui/a/TeamInfo/styles.scss +2 -2
- package/src/ui/a/index.js +1 -0
- package/src/ui/b/Button/styles.scss +38 -19
- package/src/ui/b/Metrics/Metrics.jsx +93 -0
- package/src/ui/b/Metrics/index.js +2 -0
- package/src/ui/b/Metrics/styles.scss +91 -0
- package/src/ui/b/Page/common/Section/Section.jsx +51 -2
- package/src/ui/b/Page/styles.scss +8 -2
- package/src/ui/b/QuestionDropdown/styles.scss +1 -1
- package/src/ui/b/index.js +1 -0
- package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx +1 -1
- package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +1 -1
- package/src/ui/f/fields/RatingsInput/common/Rating/Rating.jsx +2 -2
- package/src/ui/f/fields/SelectInput/styles.scss +3 -3
- package/src/ui/f/fields/TaskRecommendationInput/TaskRecommendationInput.jsx +2 -2
- package/src/ui/f/fields/TaskRecommendationInput/styles.scss +4 -0
- package/src/ui/f/fields/TextInput/styles.scss +3 -3
- package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +1 -1
- package/src/ui/form.scss +1 -1
- package/dist/cjs/a/RatingsInput/common/Rating/Rating.js +0 -120
- package/dist/cjs/a/RatingsInput/common/index.js +0 -13
- package/dist/cjs/a/RatingsInput/styles.scss +0 -35
- package/dist/es/a/RatingsInput/RatingsInput.js +0 -72
- package/dist/es/a/RatingsInput/common/Rating/Rating.js +0 -102
- package/dist/es/a/RatingsInput/common/index.js +0 -1
- package/dist/es/a/RatingsInput/index.js +0 -2
- 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,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
|
-
|