@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
@@ -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, "Rating", {
6
+ Object.defineProperty(exports, "Shapes", {
7
7
  enumerable: true,
8
8
  get: function get() {
9
- return _Rating.default;
9
+ return _Shapes.default;
10
10
  }
11
11
  });
12
12
 
13
- var _Rating = _interopRequireDefault(require("./Rating"));
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(--background);
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-background));
17
+ background: var(--light-y, var(--light-background1));
18
18
  box-shadow: $box-shadow;
19
19
  display: flex;
20
20
  flex-direction: column;
@@ -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
- //border-radius: var(--theme-border-radius);
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
- &:not(:disabled) {
40
- &:hover,
41
- &:focus {
42
- border: 1px solid transparent;
43
- color: var(--on-x, var(--on-#{$default-color}));
44
- }
40
+ &:hover,
41
+ &:focus,
42
+ &:disabled{
43
+ background: transparent;
44
+ }
45
45
 
46
+ &:not(:disabled) {
46
47
  &:hover {
47
- background: var(--x, var(--#{$default-color}));
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
- background: var(--dark-x, var(--#{$default-color}));
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
- &:hover,
63
- &:focus {
64
- background:transparent;
65
- border: 1px solid transparent;
66
- color: var(--dark-x, var(--on-#{$default-color}));
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(--light-x);
73
- filter: brightness(150%);
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 = 'ratings-input';
24
+ var componentClassName = 'metrics';
24
25
  /**
25
26
  * This is the component description.
26
27
  */
27
28
 
28
- var RatingsInput = _ref => {
29
+ var Metrics = _ref => {
29
30
  var {
30
31
  id,
31
32
  className: userClassName,
32
33
  style,
33
- name,
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
- }, [...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
- }));
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
- RatingsInput.propTypes = {
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 number of ratings input stars to be displayed
79
+ * The array of details
77
80
  */
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
81
+ items: _propTypes.default.node
86
82
  };
87
- var _default = RatingsInput;
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, "RatingsInput", {
6
+ Object.defineProperty(exports, "Metrics", {
7
7
  enumerable: true,
8
8
  get: function get() {
9
- return _RatingsInput.default;
9
+ return _Metrics.default;
10
10
  }
11
11
  });
12
12
 
13
- var _RatingsInput = _interopRequireDefault(require("./RatingsInput"));
13
+ var _Metrics = _interopRequireDefault(require("./Metrics"));
14
14
 
15
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }