@pareto-engineering/design-system 2.0.0-alpha.24 → 2.0.0-alpha.28

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.
@@ -19,6 +19,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
19
19
 
20
20
  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); }
21
21
 
22
+ 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; }
23
+
24
+ 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; }
25
+
26
+ 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; }
27
+
22
28
  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
29
 
24
30
  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; }
@@ -53,10 +59,10 @@ var SVG = _ref => {
53
59
  (0, React.useLayoutEffect)(() => {
54
60
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
55
61
  });
56
- var useSVGProps = (0, React.useMemo)(() => ({
62
+ var useSVGProps = (0, React.useMemo)(() => _objectSpread(_objectSpread({
57
63
  className: useClassName,
58
- source,
59
- target,
64
+ source
65
+ }, target), {}, {
60
66
  sprite,
61
67
  strokeWidth
62
68
  }), [useClassName, source, target, strokeWidth, sprite]);
@@ -23,28 +23,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
23
23
  var baseClassName = _bem.default.base;
24
24
  var componentClassName = 'logo';
25
25
  var defaultTargets = [{
26
- id: 'logo__p',
27
- target: 'logo__p'
26
+ id: 'logo_squares',
27
+ target: 'logo_squares'
28
28
  }, {
29
- id: 'logo__areto',
30
- target: 'logo__areto'
31
- }, {
32
- id: 'logo__t',
33
- target: 'logo__t'
29
+ id: 'logo_pareto',
30
+ target: 'logo_pareto'
34
31
  }];
35
32
  var contentMap = {
36
33
  default: {
37
- sprite: '/logo_parts.svg',
38
- viewBox: '0 0 688 250',
34
+ sprite: '/logo.svg',
35
+ viewBox: '0 0 156 30',
39
36
  targets: defaultTargets
40
- },
41
- beta: {
42
- sprite: '/logo_parts_beta.svg',
43
- viewBox: '0 0 1000 300',
44
- targets: [...defaultTargets, {
45
- id: 'logo__beta',
46
- target: 'logo__beta'
47
- }]
48
37
  }
49
38
  };
50
39
  /**
@@ -57,8 +46,6 @@ var Logo = _ref => {
57
46
  className: userClassName,
58
47
  style,
59
48
  color,
60
- animated,
61
- loop,
62
49
  height,
63
50
  width,
64
51
  variant // ...otherProps
@@ -75,9 +62,8 @@ var Logo = _ref => {
75
62
  targets: svgConfig.targets,
76
63
  sprite: svgConfig.sprite,
77
64
  id: id,
78
- className: [baseClassName, componentClassName, "x-".concat(color), userClassName, loop && 'loop'].filter(e => e).join(' '),
79
- style: style,
80
- animated: animated // {...otherProps}
65
+ className: [baseClassName, componentClassName, "x-".concat(color), userClassName].filter(e => e).join(' '),
66
+ style: style // {...otherProps}
81
67
 
82
68
  });
83
69
  };
@@ -103,16 +89,6 @@ Logo.propTypes = {
103
89
  */
104
90
  color: _propTypes.default.string,
105
91
 
106
- /**
107
- * Whether the logo is animated
108
- */
109
- animated: _propTypes.default.bool,
110
-
111
- /**
112
- * Whether the animation loops
113
- */
114
- loop: _propTypes.default.bool,
115
-
116
92
  /**
117
93
  * The height of the element
118
94
  */
@@ -129,10 +105,8 @@ Logo.propTypes = {
129
105
  variant: _propTypes.default.string
130
106
  };
131
107
  Logo.defaultProps = {
132
- color: 'primary',
133
- animated: false,
134
- loop: false,
135
- height: '4em',
108
+ color: 'paragraph',
109
+ height: '2em',
136
110
  variant: 'default'
137
111
  };
138
112
  var _default = Logo;
@@ -1,147 +1,9 @@
1
1
  /* @pareto-engineering/generator-front 1.0.12 */
2
2
 
3
- /* stylelint-disable selector-id-pattern, selector-max-id -- because of the custom svg */
4
-
5
3
  @use "@pareto-engineering/bem";
6
4
 
7
- // Main animation - finishes after the drawing
8
-
9
- @keyframes draw-logo-p {
10
- 0% {
11
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
12
- }
13
-
14
- 20%,
15
- 100% {
16
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
17
- }
18
- }
19
- @keyframes draw-logo-areto {
20
- 0%,
21
- 20% {
22
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
23
- }
24
-
25
- 90%,
26
- 100% {
27
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
28
- }
29
- }
30
- @keyframes draw-logo-t {
31
- 0%,
32
- 90% {
33
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
34
- }
35
-
36
- 100% {
37
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
38
- }
39
- }
40
-
41
- // Alt animation - looping
42
-
43
- @keyframes draw-alt-logo-p {
44
- 0% {
45
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
46
- }
47
-
48
- 10%,
49
- 50% {
50
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
51
- }
52
-
53
- 60%,
54
- 100% {
55
- stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
56
- }
57
- }
58
- @keyframes draw-alt-logo-areto {
59
- 0%,
60
- 10% {
61
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
62
- }
63
-
64
- 45%,
65
- 60% {
66
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
67
- }
68
-
69
- 95%,
70
- 100% {
71
- stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
72
- }
73
- }
74
- @keyframes draw-alt-logo-t {
75
- 0%,
76
- 45% {
77
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
78
- }
79
-
80
- 50%,
81
- 95% {
82
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
83
- }
84
-
85
- 100% {
86
- stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
87
- }
88
- }
89
-
90
5
  .#{bem.$base}.logo {
91
- &.animated.animated {
92
- --svg-animation-repeats: 1;
93
- --svg-animation-time: 3.5s;
94
-
95
- &:hover,
96
- &:focus {
97
- //--path-animation: dash-a 1s linear 0s 1 forwards;
98
- }
99
-
100
- use#logo__p {
101
- //--svg-animation-delay: 0;
102
- --svg-dasharray: 1000;
103
- --svg-origin-stroke-dashoffset: -1000;
104
- //--svg-target-stroke-dashoffset: 0;
105
- --svg-final-stroke-dashoffset: 1000;
106
- animation-name: draw-logo-p;
107
- }
108
-
109
- use#logo__areto {
110
- --svg-dasharray: 2000;
111
- --svg-origin-stroke-dashoffset: 2000;
112
- //--svg-target-stroke-dashoffset: 0;
113
- --svg-final-stroke-dashoffset: -2000;
114
- animation-name: draw-logo-areto;
115
- }
116
-
117
- use#logo__t {
118
- --svg-dasharray: 200;
119
- --svg-origin-stroke-dashoffset: 200;
120
- //--svg-target-stroke-dashoffset: 0;
121
- --svg-final-stroke-dashoffset: -200;
122
- animation-name: draw-logo-t;
123
- }
124
-
125
- &.loop.loop {
126
- --svg-animation-time: 6s;
127
- --svg-animation-repeats: infinite;
128
-
129
- use#logo__p {
130
- --svg-final-stroke-dashoffset: 1000;
131
- animation-name: draw-alt-logo-p;
132
- }
133
-
134
- use#logo__areto {
135
- --svg-final-stroke-dashoffset: -2000;
136
- animation-name: draw-alt-logo-areto;
137
- }
138
6
 
139
- use#logo__t {
140
- --svg-final-stroke-dashoffset: -200;
141
- animation-name: draw-alt-logo-t;
142
- }
143
- }
144
- }
145
7
  }
146
8
 
147
9
 
@@ -74,8 +74,7 @@ var SelectInput = _ref => {
74
74
  return /*#__PURE__*/React.createElement("option", {
75
75
  key: newOption.value,
76
76
  value: newOption.value,
77
- disabled: (newOption === null || newOption === void 0 ? void 0 : newOption.disabled) || false,
78
- selected: (newOption === null || newOption === void 0 ? void 0 : newOption.disabled) || true
77
+ disabled: (newOption === null || newOption === void 0 ? void 0 : newOption.disabled) || false
79
78
  }, newOption.label);
80
79
  })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
81
80
  isError: !!meta.error,
@@ -33,7 +33,7 @@ const SVG = ({
33
33
  const useSVGProps = useMemo(() => ({
34
34
  className: useClassName,
35
35
  source,
36
- target,
36
+ ...target,
37
37
  sprite,
38
38
  strokeWidth
39
39
  }), [useClassName, source, target, strokeWidth, sprite]);
@@ -8,28 +8,17 @@ import { SVG } from "../../a"; // Local Definitions
8
8
  const baseClassName = styleNames.base;
9
9
  const componentClassName = 'logo';
10
10
  const defaultTargets = [{
11
- id: 'logo__p',
12
- target: 'logo__p'
11
+ id: 'logo_squares',
12
+ target: 'logo_squares'
13
13
  }, {
14
- id: 'logo__areto',
15
- target: 'logo__areto'
16
- }, {
17
- id: 'logo__t',
18
- target: 'logo__t'
14
+ id: 'logo_pareto',
15
+ target: 'logo_pareto'
19
16
  }];
20
17
  const contentMap = {
21
18
  default: {
22
- sprite: '/logo_parts.svg',
23
- viewBox: '0 0 688 250',
19
+ sprite: '/logo.svg',
20
+ viewBox: '0 0 156 30',
24
21
  targets: defaultTargets
25
- },
26
- beta: {
27
- sprite: '/logo_parts_beta.svg',
28
- viewBox: '0 0 1000 300',
29
- targets: [...defaultTargets, {
30
- id: 'logo__beta',
31
- target: 'logo__beta'
32
- }]
33
22
  }
34
23
  };
35
24
  /**
@@ -41,8 +30,6 @@ const Logo = ({
41
30
  className: userClassName,
42
31
  style,
43
32
  color,
44
- animated,
45
- loop,
46
33
  height,
47
34
  width,
48
35
  variant // ...otherProps
@@ -59,9 +46,8 @@ const Logo = ({
59
46
  targets: svgConfig.targets,
60
47
  sprite: svgConfig.sprite,
61
48
  id: id,
62
- className: [baseClassName, componentClassName, `x-${color}`, userClassName, loop && 'loop'].filter(e => e).join(' '),
63
- style: style,
64
- animated: animated // {...otherProps}
49
+ className: [baseClassName, componentClassName, `x-${color}`, userClassName].filter(e => e).join(' '),
50
+ style: style // {...otherProps}
65
51
 
66
52
  });
67
53
  };
@@ -87,16 +73,6 @@ Logo.propTypes = {
87
73
  */
88
74
  color: PropTypes.string,
89
75
 
90
- /**
91
- * Whether the logo is animated
92
- */
93
- animated: PropTypes.bool,
94
-
95
- /**
96
- * Whether the animation loops
97
- */
98
- loop: PropTypes.bool,
99
-
100
76
  /**
101
77
  * The height of the element
102
78
  */
@@ -113,10 +89,8 @@ Logo.propTypes = {
113
89
  variant: PropTypes.string
114
90
  };
115
91
  Logo.defaultProps = {
116
- color: 'primary',
117
- animated: false,
118
- loop: false,
119
- height: '4em',
92
+ color: 'paragraph',
93
+ height: '2em',
120
94
  variant: 'default'
121
95
  };
122
96
  export default Logo;
@@ -1,147 +1,9 @@
1
1
  /* @pareto-engineering/generator-front 1.0.12 */
2
2
 
3
- /* stylelint-disable selector-id-pattern, selector-max-id -- because of the custom svg */
4
-
5
3
  @use "@pareto-engineering/bem";
6
4
 
7
- // Main animation - finishes after the drawing
8
-
9
- @keyframes draw-logo-p {
10
- 0% {
11
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
12
- }
13
-
14
- 20%,
15
- 100% {
16
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
17
- }
18
- }
19
- @keyframes draw-logo-areto {
20
- 0%,
21
- 20% {
22
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
23
- }
24
-
25
- 90%,
26
- 100% {
27
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
28
- }
29
- }
30
- @keyframes draw-logo-t {
31
- 0%,
32
- 90% {
33
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
34
- }
35
-
36
- 100% {
37
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
38
- }
39
- }
40
-
41
- // Alt animation - looping
42
-
43
- @keyframes draw-alt-logo-p {
44
- 0% {
45
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
46
- }
47
-
48
- 10%,
49
- 50% {
50
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
51
- }
52
-
53
- 60%,
54
- 100% {
55
- stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
56
- }
57
- }
58
- @keyframes draw-alt-logo-areto {
59
- 0%,
60
- 10% {
61
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
62
- }
63
-
64
- 45%,
65
- 60% {
66
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
67
- }
68
-
69
- 95%,
70
- 100% {
71
- stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
72
- }
73
- }
74
- @keyframes draw-alt-logo-t {
75
- 0%,
76
- 45% {
77
- stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
78
- }
79
-
80
- 50%,
81
- 95% {
82
- stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
83
- }
84
-
85
- 100% {
86
- stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
87
- }
88
- }
89
-
90
5
  .#{bem.$base}.logo {
91
- &.animated.animated {
92
- --svg-animation-repeats: 1;
93
- --svg-animation-time: 3.5s;
94
-
95
- &:hover,
96
- &:focus {
97
- //--path-animation: dash-a 1s linear 0s 1 forwards;
98
- }
99
-
100
- use#logo__p {
101
- //--svg-animation-delay: 0;
102
- --svg-dasharray: 1000;
103
- --svg-origin-stroke-dashoffset: -1000;
104
- //--svg-target-stroke-dashoffset: 0;
105
- --svg-final-stroke-dashoffset: 1000;
106
- animation-name: draw-logo-p;
107
- }
108
-
109
- use#logo__areto {
110
- --svg-dasharray: 2000;
111
- --svg-origin-stroke-dashoffset: 2000;
112
- //--svg-target-stroke-dashoffset: 0;
113
- --svg-final-stroke-dashoffset: -2000;
114
- animation-name: draw-logo-areto;
115
- }
116
-
117
- use#logo__t {
118
- --svg-dasharray: 200;
119
- --svg-origin-stroke-dashoffset: 200;
120
- //--svg-target-stroke-dashoffset: 0;
121
- --svg-final-stroke-dashoffset: -200;
122
- animation-name: draw-logo-t;
123
- }
124
-
125
- &.loop.loop {
126
- --svg-animation-time: 6s;
127
- --svg-animation-repeats: infinite;
128
-
129
- use#logo__p {
130
- --svg-final-stroke-dashoffset: 1000;
131
- animation-name: draw-alt-logo-p;
132
- }
133
-
134
- use#logo__areto {
135
- --svg-final-stroke-dashoffset: -2000;
136
- animation-name: draw-alt-logo-areto;
137
- }
138
6
 
139
- use#logo__t {
140
- --svg-final-stroke-dashoffset: -200;
141
- animation-name: draw-alt-logo-t;
142
- }
143
- }
144
- }
145
7
  }
146
8
 
147
9
 
@@ -57,8 +57,7 @@ const SelectInput = ({
57
57
  return /*#__PURE__*/React.createElement("option", {
58
58
  key: newOption.value,
59
59
  value: newOption.value,
60
- disabled: (newOption === null || newOption === void 0 ? void 0 : newOption.disabled) || false,
61
- selected: (newOption === null || newOption === void 0 ? void 0 : newOption.disabled) || true
60
+ disabled: (newOption === null || newOption === void 0 ? void 0 : newOption.disabled) || false
62
61
  }, newOption.label);
63
62
  })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(FormDescription, {
64
63
  isError: !!meta.error,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pareto-engineering/design-system",
3
- "version": "2.0.0-alpha.24",
3
+ "version": "2.0.0-alpha.28",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.js",
@@ -79,7 +79,7 @@
79
79
  "stylelint-config-palantir": "^5.1.0"
80
80
  },
81
81
  "dependencies": {
82
- "@pareto-engineering/assets": "^2.0.0-alpha.10",
82
+ "@pareto-engineering/assets": "^2.0.0-alpha.12",
83
83
  "@pareto-engineering/bem": "^0.1.5",
84
84
  "@pareto-engineering/styles": "^2.0.0-alpha.8",
85
85
  "date-fns": "^2.22.1",