@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
|
@@ -0,0 +1,163 @@
|
|
|
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
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
+
|
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
19
|
+
|
|
20
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
+
|
|
22
|
+
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); }
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
// Local Definitions
|
|
27
|
+
var baseClassName = _bem.default.base;
|
|
28
|
+
var componentClassName = 'shapes';
|
|
29
|
+
/**
|
|
30
|
+
* This is the component description.
|
|
31
|
+
*/
|
|
32
|
+
|
|
33
|
+
var Shapes = _ref => {
|
|
34
|
+
var {
|
|
35
|
+
id,
|
|
36
|
+
className: userClassName,
|
|
37
|
+
style,
|
|
38
|
+
shape,
|
|
39
|
+
height,
|
|
40
|
+
overflow,
|
|
41
|
+
verticalAlign,
|
|
42
|
+
horizontalAlign // ...otherProps
|
|
43
|
+
|
|
44
|
+
} = _ref;
|
|
45
|
+
(0, React.useLayoutEffect)(() => {
|
|
46
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
47
|
+
}, []);
|
|
48
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
49
|
+
id: id,
|
|
50
|
+
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
51
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
52
|
+
'--shape-height': height,
|
|
53
|
+
'--overflow': overflow,
|
|
54
|
+
'--vertical-align': verticalAlign,
|
|
55
|
+
'--horizontal-align': horizontalAlign
|
|
56
|
+
}) // {...otherProps}
|
|
57
|
+
|
|
58
|
+
}, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
|
|
59
|
+
className: "triangle"
|
|
60
|
+
}), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
|
|
61
|
+
className: "half-ellipses"
|
|
62
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
63
|
+
className: "up"
|
|
64
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
65
|
+
className: "down"
|
|
66
|
+
})), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
|
|
67
|
+
className: "ellipse"
|
|
68
|
+
}), shape === 'diamonds' && /*#__PURE__*/React.createElement("div", {
|
|
69
|
+
className: "diamonds"
|
|
70
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
71
|
+
className: "top-right"
|
|
72
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
73
|
+
className: "bottom-left"
|
|
74
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
75
|
+
className: "bottom-right"
|
|
76
|
+
})), shape === 'rectangles' && /*#__PURE__*/React.createElement("div", {
|
|
77
|
+
className: "rectangles"
|
|
78
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
className: "top"
|
|
80
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
81
|
+
className: "center"
|
|
82
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
className: "bottom"
|
|
84
|
+
})), shape === 'half-ellipse' && /*#__PURE__*/React.createElement("div", {
|
|
85
|
+
className: "half-ellipse"
|
|
86
|
+
}), shape === 'circle' && /*#__PURE__*/React.createElement("div", {
|
|
87
|
+
className: "circle"
|
|
88
|
+
}), shape === 'half-circle' && /*#__PURE__*/React.createElement("div", {
|
|
89
|
+
className: "half-circle"
|
|
90
|
+
}), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
|
|
91
|
+
className: "ellipses"
|
|
92
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
93
|
+
className: "first"
|
|
94
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: "second"
|
|
96
|
+
})), shape === 'spiral' && /*#__PURE__*/React.createElement("div", {
|
|
97
|
+
className: "spiral"
|
|
98
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
99
|
+
className: "circle-one"
|
|
100
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
101
|
+
className: "circle-two"
|
|
102
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
103
|
+
className: "circle-three"
|
|
104
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
105
|
+
className: "circle-four"
|
|
106
|
+
})), shape === 'rotated-ellipses' && /*#__PURE__*/React.createElement("div", {
|
|
107
|
+
className: "rotated-ellipses"
|
|
108
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
109
|
+
className: "ellipse-one"
|
|
110
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
111
|
+
className: "ellipse-two"
|
|
112
|
+
})));
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
Shapes.propTypes = {
|
|
116
|
+
/**
|
|
117
|
+
* The HTML id for this element
|
|
118
|
+
*/
|
|
119
|
+
id: _propTypes.default.string,
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* The HTML class names for this element
|
|
123
|
+
*/
|
|
124
|
+
className: _propTypes.default.string,
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* The React-written, css properties for this element.
|
|
128
|
+
*/
|
|
129
|
+
style: _propTypes.default.objectOf(_propTypes.default.string),
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* The height of the shape.
|
|
133
|
+
*/
|
|
134
|
+
height: _propTypes.default.string,
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* The vertical alignment of the shape.
|
|
138
|
+
*/
|
|
139
|
+
verticalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* The horizontal alignment of the shape.
|
|
143
|
+
*/
|
|
144
|
+
horizontalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* The options of a shape to use
|
|
148
|
+
*/
|
|
149
|
+
shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles', 'rotated-ellipses']),
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* The overflow of the shape.
|
|
153
|
+
*/
|
|
154
|
+
overflow: _propTypes.default.oneOf(['hidden', 'visible'])
|
|
155
|
+
};
|
|
156
|
+
Shapes.defaultProps = {
|
|
157
|
+
verticalAlign: 'center',
|
|
158
|
+
horizontalAlign: 'center',
|
|
159
|
+
shape: 'triangle',
|
|
160
|
+
overflow: 'hidden'
|
|
161
|
+
};
|
|
162
|
+
var _default = Shapes;
|
|
163
|
+
exports.default = _default;
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "
|
|
6
|
+
Object.defineProperty(exports, "Shapes", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function get() {
|
|
9
|
-
return
|
|
9
|
+
return _Shapes.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var _Shapes = _interopRequireDefault(require("./Shapes"));
|
|
14
14
|
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
/* @pareto-engineering/generator-front 1.0.12 */
|
|
2
|
+
|
|
3
|
+
@use "@pareto-engineering/bem";
|
|
4
|
+
|
|
5
|
+
$default-ellipse-height:50em;
|
|
6
|
+
$default-diamond-height:40em;
|
|
7
|
+
$default-circle-height:50em;
|
|
8
|
+
$default-triangle-height:40em;
|
|
9
|
+
$default-rectangle-height:50em;
|
|
10
|
+
$default-shapes-opacity:.8;
|
|
11
|
+
|
|
12
|
+
.#{bem.$base}.shapes {
|
|
13
|
+
position: absolute;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
overflow: var(--overflow);
|
|
19
|
+
justify-content: var(--vertical-align);
|
|
20
|
+
align-items: var(--horizontal-align);
|
|
21
|
+
height: 100%;
|
|
22
|
+
width: 100%;
|
|
23
|
+
|
|
24
|
+
.triangle {
|
|
25
|
+
background-image: linear-gradient(transparent, var(--dark-y));
|
|
26
|
+
clip-path: polygon(0 0, 50% 100%, 100% 0);
|
|
27
|
+
height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
|
|
28
|
+
opacity: $default-shapes-opacity;
|
|
29
|
+
width: var(--shape-height, #{$default-triangle-height});
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.half-ellipses {
|
|
33
|
+
height: var(--shape-height, #{$default-ellipse-height});
|
|
34
|
+
opacity: $default-shapes-opacity;
|
|
35
|
+
width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
|
|
36
|
+
|
|
37
|
+
.up {
|
|
38
|
+
background-image: radial-gradient(ellipse at center bottom, var(--y) 5%, transparent 65%);
|
|
39
|
+
clip-path: ellipse(35% 100% at 50% 0%);
|
|
40
|
+
height: 50%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.down {
|
|
44
|
+
background-image: radial-gradient(ellipse at center top, var(--y) 5%, transparent 65%);
|
|
45
|
+
clip-path: ellipse(35% 100% at 50% 100%);
|
|
46
|
+
height: 50%;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.ellipse {
|
|
51
|
+
background-image: linear-gradient(to top left, var(--dark-y), var(--light-y), var(--dark-y));
|
|
52
|
+
clip-path: ellipse(50% 25% at 50% 50%);
|
|
53
|
+
height: var(--shape-height, #{$default-ellipse-height});
|
|
54
|
+
opacity: $default-shapes-opacity;
|
|
55
|
+
transform: rotate3d(0, 0, -1, 10deg);
|
|
56
|
+
width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.diamonds {
|
|
60
|
+
height: var(--shape-height, #{$default-diamond-height});
|
|
61
|
+
opacity: $default-shapes-opacity;
|
|
62
|
+
position: relative;
|
|
63
|
+
width: var(--shape-height, #{$default-diamond-height});
|
|
64
|
+
|
|
65
|
+
.top-right {
|
|
66
|
+
background-image: linear-gradient(to right, var(--dark-y), var(--y));
|
|
67
|
+
clip-path: polygon(100% 100%, 0 0, 100% 0);
|
|
68
|
+
height: 100%;
|
|
69
|
+
position: absolute;
|
|
70
|
+
width: 100%;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.bottom-left {
|
|
74
|
+
background-image: linear-gradient(to left, var(--dark-y), var(--y));
|
|
75
|
+
clip-path: polygon(0 100%, 0 0, 100% 100%);
|
|
76
|
+
height: 100%;
|
|
77
|
+
opacity: .95;
|
|
78
|
+
position: absolute;
|
|
79
|
+
width: 100%;
|
|
80
|
+
z-index: 1;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.bottom-right {
|
|
84
|
+
background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
|
|
85
|
+
clip-path: polygon(100% 100%, 100% 0, 0 100%);
|
|
86
|
+
height: 100%;
|
|
87
|
+
position: absolute;
|
|
88
|
+
width: 100%;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.rectangles {
|
|
93
|
+
display: grid;
|
|
94
|
+
grid-template-rows: repeat(3, 1fr);
|
|
95
|
+
height: var(--shape-height, #{$default-rectangle-height});
|
|
96
|
+
opacity: $default-shapes-opacity;
|
|
97
|
+
width: var(--shape-height, #{$default-rectangle-height});
|
|
98
|
+
|
|
99
|
+
.top {
|
|
100
|
+
background-image: linear-gradient(to right, var(--dark-y), var(--y));
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.center {
|
|
104
|
+
background-image: linear-gradient(to left, var(--dark-y), var(--y));
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.bottom {
|
|
108
|
+
background-image: linear-gradient(to right, var(--dark-y), var(--y));
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.half-ellipse {
|
|
113
|
+
background-image: radial-gradient(ellipse at center bottom, var(--y) 10%, transparent 65%);
|
|
114
|
+
clip-path: ellipse(60% 100% at 50% 0%);
|
|
115
|
+
height: var(--shape-height, #{$default-ellipse-height});
|
|
116
|
+
opacity: $default-shapes-opacity;
|
|
117
|
+
width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.circle {
|
|
121
|
+
background-image: linear-gradient(var(--light-y), var(--dark-y));
|
|
122
|
+
clip-path: circle(50% at 50% 50%);
|
|
123
|
+
height: var(--shape-height, #{$default-circle-height});
|
|
124
|
+
opacity: $default-shapes-opacity;
|
|
125
|
+
width: var(--shape-height, #{$default-circle-height});
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.half-circle {
|
|
129
|
+
background: linear-gradient(var(--light-y) 30%, var(--dark-y) 100%);
|
|
130
|
+
clip-path: circle(50% at 50% 100%);
|
|
131
|
+
height: var(--shape-height, #{$default-circle-height});
|
|
132
|
+
opacity: $default-shapes-opacity;
|
|
133
|
+
width: calc(var(--shape-height, #{$default-circle-height}) * 2);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.ellipses {
|
|
137
|
+
height: var(--shape-height, #{$default-ellipse-height});
|
|
138
|
+
opacity: $default-shapes-opacity;
|
|
139
|
+
position: relative;
|
|
140
|
+
width: var(--shape-height, #{$default-ellipse-height});
|
|
141
|
+
|
|
142
|
+
.first {
|
|
143
|
+
background-image: linear-gradient(to top, var(--dark-y), var(--y), var(--light-y) 50%, transparent);
|
|
144
|
+
clip-path: ellipse(50% 20% at 50% 60%);
|
|
145
|
+
height: 100%;
|
|
146
|
+
position: absolute;
|
|
147
|
+
width: 100%;
|
|
148
|
+
z-index: 1;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.second {
|
|
152
|
+
background-image: linear-gradient(to bottom,var(--dark-y), var(--y), var(--light-y) 45%, transparent);
|
|
153
|
+
clip-path: ellipse(50% 20% at 50% 40%);
|
|
154
|
+
height: 100%;
|
|
155
|
+
position: absolute;
|
|
156
|
+
width: 100%;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.spiral {
|
|
161
|
+
height: var(--shape-height, #{$default-ellipse-height});
|
|
162
|
+
width: var(--shape-height, #{$default-ellipse-height});
|
|
163
|
+
opacity: $default-shapes-opacity;
|
|
164
|
+
position: relative;
|
|
165
|
+
display: flex;
|
|
166
|
+
justify-content: center;
|
|
167
|
+
align-items: center;
|
|
168
|
+
|
|
169
|
+
> * {
|
|
170
|
+
border-radius: 50%;
|
|
171
|
+
background: radial-gradient(ellipse at center bottom ,var(--dark-y) 10%, transparent 60%);
|
|
172
|
+
position: absolute;
|
|
173
|
+
opacity: .5;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.circle-one {
|
|
177
|
+
transform: rotate(45deg);
|
|
178
|
+
height:calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
|
|
179
|
+
width: calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.circle-two {
|
|
183
|
+
height: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
|
|
184
|
+
width: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.circle-three {
|
|
188
|
+
transform: rotate(-45deg);
|
|
189
|
+
height: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
|
|
190
|
+
width: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.circle-four {
|
|
194
|
+
transform: rotate(-90deg);
|
|
195
|
+
height: calc(var(--shape-height, #{$default-ellipse-height})* 1);
|
|
196
|
+
width: calc(var(--shape-height, #{$default-ellipse-height})* 1);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
.rotated-ellipses {
|
|
200
|
+
height: var(--shape-height, #{$default-ellipse-height});
|
|
201
|
+
opacity: $default-shapes-opacity;
|
|
202
|
+
width: var(--shape-height, #{$default-ellipse-height});
|
|
203
|
+
display: flex;
|
|
204
|
+
|
|
205
|
+
> *{
|
|
206
|
+
width: 100%;
|
|
207
|
+
height: 100%;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.ellipse-one {
|
|
211
|
+
background-image: radial-gradient(ellipse at bottom left, var(--y) 30%, transparent 65%);
|
|
212
|
+
transform: rotate(-15deg);
|
|
213
|
+
clip-path: ellipse(50% 35% at 50% 50%);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.ellipse-two {
|
|
217
|
+
background-image: radial-gradient(ellipse at top right, var(--y) 30%, transparent 65%);
|
|
218
|
+
transform: rotate(-15deg);
|
|
219
|
+
clip-path: ellipse(50% 35% at 50% 50%);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
@@ -10,11 +10,11 @@ $img-border-radius: var(--theme-border-radius);
|
|
|
10
10
|
$p-h4-color:var(--subtitle);
|
|
11
11
|
$role-color:var(--metadata);
|
|
12
12
|
$default-name-color:var(--main1);
|
|
13
|
-
$box-shadow:0 .45em 1em 0 var(--
|
|
13
|
+
$box-shadow:0 .45em 1em 0 var(--background1);
|
|
14
14
|
|
|
15
15
|
.#{bem.$base}.team-info {
|
|
16
16
|
align-items: flex-start;
|
|
17
|
-
background: var(--light-y, var(--light-
|
|
17
|
+
background: var(--light-y, var(--light-background1));
|
|
18
18
|
box-shadow: $box-shadow;
|
|
19
19
|
display: flex;
|
|
20
20
|
flex-direction: column;
|
package/dist/cjs/a/index.js
CHANGED
|
@@ -141,6 +141,12 @@ Object.defineProperty(exports, "Timestamp", {
|
|
|
141
141
|
return _Timestamp.Timestamp;
|
|
142
142
|
}
|
|
143
143
|
});
|
|
144
|
+
Object.defineProperty(exports, "Shapes", {
|
|
145
|
+
enumerable: true,
|
|
146
|
+
get: function get() {
|
|
147
|
+
return _Shapes.Shapes;
|
|
148
|
+
}
|
|
149
|
+
});
|
|
144
150
|
|
|
145
151
|
var _SVG = require("./SVG");
|
|
146
152
|
|
|
@@ -180,4 +186,6 @@ var _ContentCard = require("./ContentCard");
|
|
|
180
186
|
|
|
181
187
|
var _DotInfo = require("./DotInfo");
|
|
182
188
|
|
|
183
|
-
var _Timestamp = require("./Timestamp");
|
|
189
|
+
var _Timestamp = require("./Timestamp");
|
|
190
|
+
|
|
191
|
+
var _Shapes = require("./Shapes");
|
|
@@ -4,15 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
$default-padding: 1em 1em .84em;
|
|
6
6
|
$compact-padding: .6em .6em .48em;
|
|
7
|
-
$default-border-radius:2em;
|
|
8
7
|
$default-color:primary;
|
|
9
8
|
$font-weight:bold;
|
|
10
9
|
|
|
11
10
|
.#{bem.$base}.button {
|
|
12
11
|
background: var(--x, var(--#{$default-color}));
|
|
13
12
|
border: transparent;
|
|
14
|
-
|
|
15
|
-
border-radius: $default-border-radius;
|
|
13
|
+
border-radius: var(--theme-border-radius);
|
|
16
14
|
color: var(--on-x, var(--on-#{$default-color}));
|
|
17
15
|
font-weight: 600;
|
|
18
16
|
padding: $default-padding;
|
|
@@ -24,6 +22,9 @@ $font-weight:bold;
|
|
|
24
22
|
&:hover {
|
|
25
23
|
background: var(--light-x, var(--light-#{$default-color}));
|
|
26
24
|
}
|
|
25
|
+
&:focus {
|
|
26
|
+
background: var(--dark-x, var(--dark-#{$default-color}));
|
|
27
|
+
}
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
|
|
@@ -36,21 +37,28 @@ $font-weight:bold;
|
|
|
36
37
|
border: 1px solid var(--x, var(--#{$default-color}));
|
|
37
38
|
color: var(--x, var(--#{$default-color}));
|
|
38
39
|
|
|
39
|
-
&:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
40
|
+
&:hover,
|
|
41
|
+
&:focus,
|
|
42
|
+
&:disabled{
|
|
43
|
+
background: transparent;
|
|
44
|
+
}
|
|
45
45
|
|
|
46
|
+
&:not(:disabled) {
|
|
46
47
|
&:hover {
|
|
47
|
-
|
|
48
|
+
border: 1px solid var(--light-x, var(--light-#{$default-color}));
|
|
49
|
+
color: var(--light-x, var(--light-#{$default-color}));
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
&:focus {
|
|
51
|
-
|
|
53
|
+
border: 1px solid var(--dark-x, var(--dark-#{$default-color}));
|
|
54
|
+
color: var(--dark-x, var(--dark-#{$default-color}));
|
|
52
55
|
}
|
|
53
56
|
}
|
|
57
|
+
|
|
58
|
+
&:disabled{
|
|
59
|
+
border: 1px solid var(--x, var(--#{$default-color}));
|
|
60
|
+
color: var(--x, var(--#{$default-color}));
|
|
61
|
+
}
|
|
54
62
|
}
|
|
55
63
|
|
|
56
64
|
&.#{bem.$modifier-simple} {
|
|
@@ -58,19 +66,30 @@ $font-weight:bold;
|
|
|
58
66
|
border: 1px solid transparent;
|
|
59
67
|
color: var(--x, var(--#{$default-color}));
|
|
60
68
|
|
|
69
|
+
&:disabled,
|
|
70
|
+
&:hover,
|
|
71
|
+
&:focus {
|
|
72
|
+
background: transparent;
|
|
73
|
+
}
|
|
74
|
+
|
|
61
75
|
&:not(:disabled) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
76
|
+
&:hover {
|
|
77
|
+
color: var(--light-x, var(--light-#{$default-color}));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&:focus {
|
|
81
|
+
color: var(--dark-x, var(--dark-#{$default-color}));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&:disabled {
|
|
86
|
+
color: var(--x, var(--#{$default-color}));
|
|
68
87
|
}
|
|
69
88
|
}
|
|
70
89
|
|
|
71
90
|
&:disabled {
|
|
72
|
-
background: var(--
|
|
73
|
-
filter: brightness(
|
|
91
|
+
background: var(--x);
|
|
92
|
+
filter: brightness(125%);
|
|
74
93
|
}
|
|
75
94
|
}
|
|
76
95
|
|
|
@@ -7,56 +7,59 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var React = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
|
+
var _ = require("../..");
|
|
11
|
+
|
|
10
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
13
|
|
|
12
14
|
var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
|
|
13
15
|
|
|
14
|
-
var _common = require("./common");
|
|
15
|
-
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
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
19
|
|
|
20
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
21
|
|
|
22
|
+
// Local Definitions
|
|
22
23
|
var baseClassName = _bem.default.base;
|
|
23
|
-
var componentClassName = '
|
|
24
|
+
var componentClassName = 'metrics';
|
|
24
25
|
/**
|
|
25
26
|
* This is the component description.
|
|
26
27
|
*/
|
|
27
28
|
|
|
28
|
-
var
|
|
29
|
+
var Metrics = _ref => {
|
|
29
30
|
var {
|
|
30
31
|
id,
|
|
31
32
|
className: userClassName,
|
|
32
33
|
style,
|
|
33
|
-
|
|
34
|
-
ratingCount // ...otherProps
|
|
34
|
+
items // ...otherProps
|
|
35
35
|
|
|
36
36
|
} = _ref;
|
|
37
37
|
(0, React.useLayoutEffect)(() => {
|
|
38
38
|
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
39
39
|
}, []);
|
|
40
|
-
var [hover, setHover] = (0, React.useState)(null);
|
|
41
40
|
return /*#__PURE__*/React.createElement("div", {
|
|
42
41
|
id: id,
|
|
43
42
|
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
44
43
|
style: style // {...otherProps}
|
|
45
44
|
|
|
46
|
-
},
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
})
|
|
45
|
+
}, items.map(counter => /*#__PURE__*/React.createElement("div", {
|
|
46
|
+
className: "metric"
|
|
47
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
48
|
+
className: "circle y-".concat(counter.circleColor)
|
|
49
|
+
}, /*#__PURE__*/React.createElement(_.AnimatedCounter, {
|
|
50
|
+
color: counter.color,
|
|
51
|
+
delay: counter.delay,
|
|
52
|
+
number: counter.number,
|
|
53
|
+
before: counter.before,
|
|
54
|
+
after: counter.after
|
|
55
|
+
}), /*#__PURE__*/React.createElement("p", {
|
|
56
|
+
className: "description-md sm-h xs-h md-s1"
|
|
57
|
+
}, counter.description)), /*#__PURE__*/React.createElement("p", {
|
|
58
|
+
className: "description-sm md-h lg-h sm-s-2"
|
|
59
|
+
}, counter.description))));
|
|
57
60
|
};
|
|
58
61
|
|
|
59
|
-
|
|
62
|
+
Metrics.propTypes = {
|
|
60
63
|
/**
|
|
61
64
|
* The HTML id for this element
|
|
62
65
|
*/
|
|
@@ -73,16 +76,14 @@ RatingsInput.propTypes = {
|
|
|
73
76
|
style: _propTypes.default.objectOf(_propTypes.default.string),
|
|
74
77
|
|
|
75
78
|
/**
|
|
76
|
-
* The
|
|
79
|
+
* The array of details
|
|
77
80
|
*/
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Name of the rating input
|
|
82
|
-
*/
|
|
83
|
-
name: _propTypes.default.string
|
|
84
|
-
};
|
|
85
|
-
RatingsInput.defaultProps = {// someProp:false
|
|
81
|
+
items: _propTypes.default.node
|
|
86
82
|
};
|
|
87
|
-
|
|
83
|
+
/*
|
|
84
|
+
Metrics.defaultProps = {
|
|
85
|
+
}
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
var _default = Metrics;
|
|
88
89
|
exports.default = _default;
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "
|
|
6
|
+
Object.defineProperty(exports, "Metrics", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function get() {
|
|
9
|
-
return
|
|
9
|
+
return _Metrics.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var _Metrics = _interopRequireDefault(require("./Metrics"));
|
|
14
14
|
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|