@elliemae/ds-square-indicator 2.4.2-rc.12 → 2.4.2-rc.15

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 (5) hide show
  1. package/cjs/DSSquareIndicator.js +23 -23
  2. package/cjs/styled.js +56 -7
  3. package/esm/DSSquareIndicator.js +23 -23
  4. package/esm/styled.js +56 -6
  5. package/package.json +5 -5
package/cjs/DSSquareIndicator.js CHANGED
@@ -48,7 +48,7 @@ const DSSquareIndicator = props => {
48
48
  });
49
49
  }, [withTooltip]);
50
50
  const uniqueId = react.useMemo(() => uid.uid(16), []);
51
- const paddedCoordinate = react.useMemo(() => "calc(100% - ".concat(constants.sizeToWeight[size], ")"), [size]);
51
+ const paddedCoordinate = react.useMemo(() => `calc(100% - ${constants.sizeToWeight[size]})`, [size]);
52
52
  const hexColor = react.useMemo(() => constants.colorToHex[color], [color]);
53
53
  return /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread(_objectSpread({
54
54
  gutter: "xs",
@@ -67,69 +67,69 @@ const DSSquareIndicator = props => {
67
67
  margin: 'auto'
68
68
  }
69
69
  }, void 0, /*#__PURE__*/_jsx2__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx2__default["default"]("linearGradient", {
70
- id: "".concat(uniqueId, "-lg1"),
70
+ id: `${uniqueId}-lg1`,
71
71
  x1: "0",
72
72
  y1: "0",
73
73
  x2: "0",
74
74
  y2: "100%"
75
75
  }, void 0, /*#__PURE__*/_jsx2__default["default"]("stop", {
76
76
  offset: "20%",
77
- stopColor: "".concat(hexColor, "FF")
77
+ stopColor: `${hexColor}FF`
78
78
  }), /*#__PURE__*/_jsx2__default["default"]("stop", {
79
79
  offset: "80%",
80
- stopColor: "".concat(hexColor, "00")
80
+ stopColor: `${hexColor}00`
81
81
  })), /*#__PURE__*/_jsx2__default["default"]("linearGradient", {
82
- id: "".concat(uniqueId, "-lg2"),
82
+ id: `${uniqueId}-lg2`,
83
83
  x1: "0",
84
84
  y1: "0",
85
85
  x2: "100%",
86
86
  y2: "0"
87
87
  }, void 0, /*#__PURE__*/_jsx2__default["default"]("stop", {
88
88
  offset: "10%",
89
- stopColor: "".concat(hexColor, "00")
89
+ stopColor: `${hexColor}00`
90
90
  }), /*#__PURE__*/_jsx2__default["default"]("stop", {
91
91
  offset: "50%",
92
- stopColor: "".concat(hexColor, "FF")
92
+ stopColor: `${hexColor}FF`
93
93
  })), /*#__PURE__*/_jsx2__default["default"]("linearGradient", {
94
- id: "".concat(uniqueId, "-lg3"),
94
+ id: `${uniqueId}-lg3`,
95
95
  x1: "0",
96
96
  y1: "0",
97
97
  x2: "0",
98
98
  y2: "100%"
99
99
  }, void 0, /*#__PURE__*/_jsx2__default["default"]("stop", {
100
100
  offset: "10%",
101
- stopColor: "".concat(hexColor, "00")
101
+ stopColor: `${hexColor}00`
102
102
  }), /*#__PURE__*/_jsx2__default["default"]("stop", {
103
103
  offset: "50%",
104
- stopColor: "".concat(hexColor, "FF")
104
+ stopColor: `${hexColor}FF`
105
105
  })), /*#__PURE__*/_jsx2__default["default"]("linearGradient", {
106
- id: "".concat(uniqueId, "-lg4"),
106
+ id: `${uniqueId}-lg4`,
107
107
  x1: "0",
108
108
  y1: "0",
109
109
  x2: "100%",
110
110
  y2: "0"
111
111
  }, void 0, /*#__PURE__*/_jsx2__default["default"]("stop", {
112
112
  offset: "50%",
113
- stopColor: "".concat(hexColor, "FF")
113
+ stopColor: `${hexColor}FF`
114
114
  }), /*#__PURE__*/_jsx2__default["default"]("stop", {
115
115
  offset: "90%",
116
- stopColor: "".concat(hexColor, "00")
116
+ stopColor: `${hexColor}00`
117
117
  })), /*#__PURE__*/_jsx2__default["default"]("clipPath", {
118
- id: "".concat(uniqueId, "-lcp1")
118
+ id: `${uniqueId}-lcp1`
119
119
  }, void 0, /*#__PURE__*/_jsx2__default["default"]("rect", {
120
120
  x: constants.sizeToWeight[size],
121
121
  y: 0,
122
122
  width: "100%",
123
123
  height: constants.sizeToWeight[size]
124
124
  })), /*#__PURE__*/_jsx2__default["default"]("clipPath", {
125
- id: "".concat(uniqueId, "-lcp2")
125
+ id: `${uniqueId}-lcp2`
126
126
  }, void 0, /*#__PURE__*/_jsx2__default["default"]("rect", {
127
127
  x: paddedCoordinate,
128
128
  y: constants.sizeToWeight[size],
129
129
  width: constants.sizeToWeight[size],
130
130
  height: "100%"
131
131
  })), /*#__PURE__*/_jsx2__default["default"]("clipPath", {
132
- id: "".concat(uniqueId, "-lcp3")
132
+ id: `${uniqueId}-lcp3`
133
133
  }, void 0, /*#__PURE__*/_jsx2__default["default"]("rect", {
134
134
  x: 0,
135
135
  y: paddedCoordinate,
@@ -138,22 +138,22 @@ const DSSquareIndicator = props => {
138
138
  }))), /*#__PURE__*/_jsx2__default["default"](styled.StyledLineLeft, {
139
139
  size: size,
140
140
  __duration: __duration,
141
- fill: "url(#".concat(uniqueId, "-lg1)")
141
+ fill: `url(#${uniqueId}-lg1)`
142
142
  }), /*#__PURE__*/_jsx2__default["default"](styled.StyledLineTop, {
143
143
  size: size,
144
144
  __duration: __duration,
145
- fill: "url(#".concat(uniqueId, "-lg2)"),
146
- clipPath: "url(#".concat(uniqueId, "-lcp1)")
145
+ fill: `url(#${uniqueId}-lg2)`,
146
+ clipPath: `url(#${uniqueId}-lcp1)`
147
147
  }), /*#__PURE__*/_jsx2__default["default"](styled.StyledLineRight, {
148
148
  size: size,
149
149
  __duration: __duration,
150
- fill: "url(#".concat(uniqueId, "-lg3)"),
151
- clipPath: "url(#".concat(uniqueId, "-lcp2)")
150
+ fill: `url(#${uniqueId}-lg3)`,
151
+ clipPath: `url(#${uniqueId}-lcp2)`
152
152
  }), /*#__PURE__*/_jsx2__default["default"](styled.StyledLineBottom, {
153
153
  size: size,
154
154
  __duration: __duration,
155
- fill: "url(#".concat(uniqueId, "-lg4)"),
156
- clipPath: "url(#".concat(uniqueId, "-lcp3)")
155
+ fill: `url(#${uniqueId}-lg4)`,
156
+ clipPath: `url(#${uniqueId}-lcp3)`
157
157
  })), text !== '' && showText && /*#__PURE__*/_jsx2__default["default"]("span", {
158
158
  style: {
159
159
  color: constants.colorToHex[color],
package/cjs/styled.js CHANGED
@@ -2,21 +2,70 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
5
  var styled = require('styled-components');
7
6
  var dsSystem = require('@elliemae/ds-system');
8
7
  var constants = require('./constants.js');
9
8
 
10
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
10
 
12
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
13
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
12
 
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
16
- const lineLeftAnimation = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n"])));
17
- const lineTopAnimation = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n"])));
18
- const lineRightAnimation = dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n"])));
19
- const lineBottomAnimation = dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n"])));
13
+ const lineLeftAnimation = dsSystem.kfrm`
14
+ 0% {
15
+ y: 100%;
16
+ height: 100%;
17
+ }
18
+ 12.5%, 50% {
19
+ y: 0;
20
+ height: 100%;
21
+ }
22
+ 62.5%, 100% {
23
+ y: -100%;
24
+ height: 100%;
25
+ }
26
+ `;
27
+ const lineTopAnimation = dsSystem.kfrm`
28
+ 0% {
29
+ x: -100%;
30
+ width: 0%;
31
+ }
32
+ 25%, 50% {
33
+ x: -100%;
34
+ width: 200%;
35
+ }
36
+ 75%, 100% {
37
+ x: 100%;
38
+ width: 200%;
39
+ }
40
+ `;
41
+ const lineRightAnimation = dsSystem.kfrm`
42
+ 0%, 12.5% {
43
+ y: -100%;
44
+ height: 0%;
45
+ }
46
+ 37.5%, 62.5% {
47
+ y: -100%;
48
+ height: 200%;
49
+ }
50
+ 87.5%, 100% {
51
+ y: 100%;
52
+ height: 200%;
53
+ }
54
+ `;
55
+ const lineBottomAnimation = dsSystem.kfrm`
56
+ 0%, 25% {
57
+ x: 200%;
58
+ width: 200%;
59
+ }
60
+ 50%, 75% {
61
+ x: 0%;
62
+ width: 200%;
63
+ }
64
+ 100% {
65
+ x: -200%;
66
+ width: 200%;
67
+ }
68
+ `;
20
69
  const StyledLineLeft = /*#__PURE__*/styled__default["default"].rect.withConfig({
21
70
  componentId: "sc-df9quy-0"
22
71
  })(["x:0;y:0%;width:", ";height:100%;animation:", " ", "s linear 0s infinite;"], _ref => {
package/esm/DSSquareIndicator.js CHANGED
@@ -39,7 +39,7 @@ const DSSquareIndicator = props => {
39
39
  });
40
40
  }, [withTooltip]);
41
41
  const uniqueId = useMemo(() => uid(16), []);
42
- const paddedCoordinate = useMemo(() => "calc(100% - ".concat(sizeToWeight[size], ")"), [size]);
42
+ const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);
43
43
  const hexColor = useMemo(() => colorToHex[color], [color]);
44
44
  return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({
45
45
  gutter: "xs",
@@ -58,69 +58,69 @@ const DSSquareIndicator = props => {
58
58
  margin: 'auto'
59
59
  }
60
60
  }, void 0, /*#__PURE__*/_jsx2("defs", {}, void 0, /*#__PURE__*/_jsx2("linearGradient", {
61
- id: "".concat(uniqueId, "-lg1"),
61
+ id: `${uniqueId}-lg1`,
62
62
  x1: "0",
63
63
  y1: "0",
64
64
  x2: "0",
65
65
  y2: "100%"
66
66
  }, void 0, /*#__PURE__*/_jsx2("stop", {
67
67
  offset: "20%",
68
- stopColor: "".concat(hexColor, "FF")
68
+ stopColor: `${hexColor}FF`
69
69
  }), /*#__PURE__*/_jsx2("stop", {
70
70
  offset: "80%",
71
- stopColor: "".concat(hexColor, "00")
71
+ stopColor: `${hexColor}00`
72
72
  })), /*#__PURE__*/_jsx2("linearGradient", {
73
- id: "".concat(uniqueId, "-lg2"),
73
+ id: `${uniqueId}-lg2`,
74
74
  x1: "0",
75
75
  y1: "0",
76
76
  x2: "100%",
77
77
  y2: "0"
78
78
  }, void 0, /*#__PURE__*/_jsx2("stop", {
79
79
  offset: "10%",
80
- stopColor: "".concat(hexColor, "00")
80
+ stopColor: `${hexColor}00`
81
81
  }), /*#__PURE__*/_jsx2("stop", {
82
82
  offset: "50%",
83
- stopColor: "".concat(hexColor, "FF")
83
+ stopColor: `${hexColor}FF`
84
84
  })), /*#__PURE__*/_jsx2("linearGradient", {
85
- id: "".concat(uniqueId, "-lg3"),
85
+ id: `${uniqueId}-lg3`,
86
86
  x1: "0",
87
87
  y1: "0",
88
88
  x2: "0",
89
89
  y2: "100%"
90
90
  }, void 0, /*#__PURE__*/_jsx2("stop", {
91
91
  offset: "10%",
92
- stopColor: "".concat(hexColor, "00")
92
+ stopColor: `${hexColor}00`
93
93
  }), /*#__PURE__*/_jsx2("stop", {
94
94
  offset: "50%",
95
- stopColor: "".concat(hexColor, "FF")
95
+ stopColor: `${hexColor}FF`
96
96
  })), /*#__PURE__*/_jsx2("linearGradient", {
97
- id: "".concat(uniqueId, "-lg4"),
97
+ id: `${uniqueId}-lg4`,
98
98
  x1: "0",
99
99
  y1: "0",
100
100
  x2: "100%",
101
101
  y2: "0"
102
102
  }, void 0, /*#__PURE__*/_jsx2("stop", {
103
103
  offset: "50%",
104
- stopColor: "".concat(hexColor, "FF")
104
+ stopColor: `${hexColor}FF`
105
105
  }), /*#__PURE__*/_jsx2("stop", {
106
106
  offset: "90%",
107
- stopColor: "".concat(hexColor, "00")
107
+ stopColor: `${hexColor}00`
108
108
  })), /*#__PURE__*/_jsx2("clipPath", {
109
- id: "".concat(uniqueId, "-lcp1")
109
+ id: `${uniqueId}-lcp1`
110
110
  }, void 0, /*#__PURE__*/_jsx2("rect", {
111
111
  x: sizeToWeight[size],
112
112
  y: 0,
113
113
  width: "100%",
114
114
  height: sizeToWeight[size]
115
115
  })), /*#__PURE__*/_jsx2("clipPath", {
116
- id: "".concat(uniqueId, "-lcp2")
116
+ id: `${uniqueId}-lcp2`
117
117
  }, void 0, /*#__PURE__*/_jsx2("rect", {
118
118
  x: paddedCoordinate,
119
119
  y: sizeToWeight[size],
120
120
  width: sizeToWeight[size],
121
121
  height: "100%"
122
122
  })), /*#__PURE__*/_jsx2("clipPath", {
123
- id: "".concat(uniqueId, "-lcp3")
123
+ id: `${uniqueId}-lcp3`
124
124
  }, void 0, /*#__PURE__*/_jsx2("rect", {
125
125
  x: 0,
126
126
  y: paddedCoordinate,
@@ -129,22 +129,22 @@ const DSSquareIndicator = props => {
129
129
  }))), /*#__PURE__*/_jsx2(StyledLineLeft, {
130
130
  size: size,
131
131
  __duration: __duration,
132
- fill: "url(#".concat(uniqueId, "-lg1)")
132
+ fill: `url(#${uniqueId}-lg1)`
133
133
  }), /*#__PURE__*/_jsx2(StyledLineTop, {
134
134
  size: size,
135
135
  __duration: __duration,
136
- fill: "url(#".concat(uniqueId, "-lg2)"),
137
- clipPath: "url(#".concat(uniqueId, "-lcp1)")
136
+ fill: `url(#${uniqueId}-lg2)`,
137
+ clipPath: `url(#${uniqueId}-lcp1)`
138
138
  }), /*#__PURE__*/_jsx2(StyledLineRight, {
139
139
  size: size,
140
140
  __duration: __duration,
141
- fill: "url(#".concat(uniqueId, "-lg3)"),
142
- clipPath: "url(#".concat(uniqueId, "-lcp2)")
141
+ fill: `url(#${uniqueId}-lg3)`,
142
+ clipPath: `url(#${uniqueId}-lcp2)`
143
143
  }), /*#__PURE__*/_jsx2(StyledLineBottom, {
144
144
  size: size,
145
145
  __duration: __duration,
146
- fill: "url(#".concat(uniqueId, "-lg4)"),
147
- clipPath: "url(#".concat(uniqueId, "-lcp3)")
146
+ fill: `url(#${uniqueId}-lg4)`,
147
+ clipPath: `url(#${uniqueId}-lcp3)`
148
148
  })), text !== '' && showText && /*#__PURE__*/_jsx2("span", {
149
149
  style: {
150
150
  color: colorToHex[color],
package/esm/styled.js CHANGED
@@ -1,13 +1,63 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
1
  import styled from 'styled-components';
3
2
  import { kfrm } from '@elliemae/ds-system';
4
3
  import { sizeToWeight } from './constants.js';
5
4
 
6
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
7
- const lineLeftAnimation = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n"])));
8
- const lineTopAnimation = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n"])));
9
- const lineRightAnimation = kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n"])));
10
- const lineBottomAnimation = kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n"])));
5
+ const lineLeftAnimation = kfrm`
6
+ 0% {
7
+ y: 100%;
8
+ height: 100%;
9
+ }
10
+ 12.5%, 50% {
11
+ y: 0;
12
+ height: 100%;
13
+ }
14
+ 62.5%, 100% {
15
+ y: -100%;
16
+ height: 100%;
17
+ }
18
+ `;
19
+ const lineTopAnimation = kfrm`
20
+ 0% {
21
+ x: -100%;
22
+ width: 0%;
23
+ }
24
+ 25%, 50% {
25
+ x: -100%;
26
+ width: 200%;
27
+ }
28
+ 75%, 100% {
29
+ x: 100%;
30
+ width: 200%;
31
+ }
32
+ `;
33
+ const lineRightAnimation = kfrm`
34
+ 0%, 12.5% {
35
+ y: -100%;
36
+ height: 0%;
37
+ }
38
+ 37.5%, 62.5% {
39
+ y: -100%;
40
+ height: 200%;
41
+ }
42
+ 87.5%, 100% {
43
+ y: 100%;
44
+ height: 200%;
45
+ }
46
+ `;
47
+ const lineBottomAnimation = kfrm`
48
+ 0%, 25% {
49
+ x: 200%;
50
+ width: 200%;
51
+ }
52
+ 50%, 75% {
53
+ x: 0%;
54
+ width: 200%;
55
+ }
56
+ 100% {
57
+ x: -200%;
58
+ width: 200%;
59
+ }
60
+ `;
11
61
  const StyledLineLeft = /*#__PURE__*/styled.rect.withConfig({
12
62
  componentId: "sc-df9quy-0"
13
63
  })(["x:0;y:0%;width:", ";height:100%;animation:", " ", "s linear 0s infinite;"], _ref => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-square-indicator",
3
- "version": "2.4.2-rc.12",
3
+ "version": "2.4.2-rc.15",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
6
6
  "module": "./esm/index.js",
@@ -48,10 +48,10 @@
48
48
  "build": "node ../../scripts/build/build.js"
49
49
  },
50
50
  "dependencies": {
51
- "@elliemae/ds-grid": "2.4.2-rc.12",
52
- "@elliemae/ds-props-helpers": "2.4.2-rc.12",
53
- "@elliemae/ds-system": "2.4.2-rc.12",
54
- "@elliemae/ds-tooltip": "2.4.2-rc.12",
51
+ "@elliemae/ds-grid": "2.4.2-rc.15",
52
+ "@elliemae/ds-props-helpers": "2.4.2-rc.15",
53
+ "@elliemae/ds-system": "2.4.2-rc.15",
54
+ "@elliemae/ds-tooltip": "2.4.2-rc.15",
55
55
  "uid": "~2.0.0"
56
56
  },
57
57
  "peerDependencies": {