@elliemae/ds-circular-progress-indicator 3.12.0-rc.2 → 3.12.0-rc.21

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 (9) hide show
  1. package/dist/cjs/DSCircularProgressIndicator.js +127 -151
  2. package/dist/cjs/DSCircularProgressIndicator.js.map +1 -1
  3. package/dist/cjs/v2/DSCircularIndeterminateIndicator.js +36 -74
  4. package/dist/cjs/v2/DSCircularIndeterminateIndicator.js.map +1 -1
  5. package/dist/esm/DSCircularProgressIndicator.js +127 -151
  6. package/dist/esm/DSCircularProgressIndicator.js.map +1 -1
  7. package/dist/esm/v2/DSCircularIndeterminateIndicator.js +36 -74
  8. package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map +1 -1
  9. package/package.json +7 -7
package/dist/cjs/DSCircularProgressIndicator.js CHANGED
@@ -103,158 +103,134 @@ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, load
103
103
  default:
104
104
  break;
105
105
  }
106
- const labelText = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
107
- "data-testid": "circular-indicator-label",
108
- className: classNameElement("label"),
109
- style: { fontSize: `${sizeLabel}px` },
110
- children: currentLabel
111
- });
112
- const buildIndicator = (Component) => sizePx < 17 || showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.default, {
113
- containerProps: {
114
- id: "ds-circular-progress-indicator",
115
- "data-testid": "circular-indicator-title"
116
- },
117
- interactionType: "hover",
118
- title: currentLabel,
119
- triggerComponent: Component,
120
- placement: "bottom"
121
- }) : Component;
122
- const grayTrack = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
123
- className: classNameElement("track"),
124
- cx: "50%",
125
- cy: "50%",
126
- fill: "none",
127
- r: "28",
128
- strokeWidth: `${trackWidth}px`
129
- });
130
- const grayArc = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
131
- className: classNameElement("arc-gray"),
132
- stroke: "#E0E3E8",
133
- strokeDasharray: `${grayArcStrokeDasharray}`,
134
- strokeDashoffset: `${grayArcStrokeDashoffset}`,
135
- cx: "50%",
136
- cy: "50%",
137
- fill: "none",
138
- r: "28",
139
- strokeWidth: `${trackWidth}px`
140
- });
141
- const indicator = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
142
- height: `${sizePx}px`,
143
- version: "1.1",
144
- viewBox: "0 0 66 66",
145
- width: `${sizePx}px`,
146
- "data-testid": "circular-indicator",
147
- children: [
148
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", {
149
- children: [
150
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
151
- id: "grad1",
152
- x1: "0%",
153
- x2: "100%",
154
- y1: "100%",
155
- y2: "0%",
156
- children: [
157
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
158
- offset: "0%",
159
- style: { stopColor: "#E0E3E8", stopOpacity: 1 }
160
- }),
161
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
162
- offset: "89%",
163
- style: { stopColor: "#5594e2", stopOpacity: 1 }
164
- }),
165
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
166
- offset: "100%",
167
- style: { stopColor: "#5594e2", stopOpacity: 1 }
168
- })
169
- ]
170
- }),
171
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
172
- id: "grad2",
173
- x1: "0%",
174
- x2: "100%",
175
- y1: "100%",
176
- y2: "0%",
177
- children: [
178
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
179
- offset: "0%",
180
- style: { stopColor: "#5594e2", stopOpacity: 1 }
181
- }),
182
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
183
- offset: "11%",
184
- style: { stopColor: "#5594e2", stopOpacity: 1 }
185
- }),
186
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
187
- offset: "100%",
188
- style: { stopColor: "#E0E3E8", stopOpacity: 1 }
189
- })
190
- ]
191
- }),
192
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("marker", {
193
- id: "inverseL",
194
- viewBox: "0 0 5 10",
195
- refX: "0.5",
196
- refY: `${markerRefY}`,
197
- markerUnits: "strokeWidth",
198
- markerWidth: "0.5",
199
- markerHeight: `${markerHeight}`,
200
- orient: "auto",
201
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
202
- d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
203
- fill: "#FFF"
204
- })
205
- }),
206
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("marker", {
207
- id: "inverseR",
208
- viewBox: "0 0 5 10",
209
- refX: "0",
210
- refY: "5",
211
- markerUnits: "strokeWidth",
212
- markerWidth: "0.7",
213
- markerHeight: `${markerHeight}`,
214
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
215
- d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
216
- fill: "#FFF"
217
- })
218
- })
219
- ]
220
- }),
221
- grayTrack,
222
- !waiting && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
223
- fill: "none",
224
- fillRule: "evenodd",
225
- stroke: "none",
226
- strokeWidth: "1",
227
- children: [
228
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
229
- className: classNameElement("arc-blue"),
230
- d: "M30,5 C17.536025,6 6,17.536027 5,31",
231
- stroke: "#5594e2",
232
- strokeWidth: `${strokeWidth - 0.5}px`,
233
- strokeLinecap: "round",
234
- "data-testid": "circular-indicator-blue-arc"
235
- }),
236
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
237
- className: classNameElement("arc-white"),
238
- d: "M33,5 C17.536027,5 5,17.536027 5,33",
239
- stroke: "#FFF",
240
- strokeWidth: `${strokeWidth + 2}px`,
241
- markerStart: "url(#inverseR)",
242
- markerEnd: "url(#inverseL)"
243
- }),
106
+ const labelText = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
107
+ "p",
108
+ {
109
+ "data-testid": "circular-indicator-label",
110
+ className: classNameElement("label"),
111
+ style: { fontSize: `${sizeLabel}px` },
112
+ children: currentLabel
113
+ }
114
+ );
115
+ const buildIndicator = (Component) => sizePx < 17 || showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
116
+ import_ds_tooltip.default,
117
+ {
118
+ containerProps: {
119
+ id: "ds-circular-progress-indicator",
120
+ "data-testid": "circular-indicator-title"
121
+ },
122
+ interactionType: "hover",
123
+ title: currentLabel,
124
+ triggerComponent: Component,
125
+ placement: "bottom"
126
+ }
127
+ ) : Component;
128
+ const grayTrack = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
129
+ "circle",
130
+ {
131
+ className: classNameElement("track"),
132
+ cx: "50%",
133
+ cy: "50%",
134
+ fill: "none",
135
+ r: "28",
136
+ strokeWidth: `${trackWidth}px`
137
+ }
138
+ );
139
+ const grayArc = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
140
+ "circle",
141
+ {
142
+ className: classNameElement("arc-gray"),
143
+ stroke: "#E0E3E8",
144
+ strokeDasharray: `${grayArcStrokeDasharray}`,
145
+ strokeDashoffset: `${grayArcStrokeDashoffset}`,
146
+ cx: "50%",
147
+ cy: "50%",
148
+ fill: "none",
149
+ r: "28",
150
+ strokeWidth: `${trackWidth}px`
151
+ }
152
+ );
153
+ const indicator = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
154
+ "svg",
155
+ {
156
+ height: `${sizePx}px`,
157
+ version: "1.1",
158
+ viewBox: "0 0 66 66",
159
+ width: `${sizePx}px`,
160
+ "data-testid": "circular-indicator",
161
+ children: [
162
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
163
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "grad1", x1: "0%", x2: "100%", y1: "100%", y2: "0%", children: [
164
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", style: { stopColor: "#E0E3E8", stopOpacity: 1 } }),
165
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "89%", style: { stopColor: "#5594e2", stopOpacity: 1 } }),
166
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", style: { stopColor: "#5594e2", stopOpacity: 1 } })
167
+ ] }),
168
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "grad2", x1: "0%", x2: "100%", y1: "100%", y2: "0%", children: [
169
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", style: { stopColor: "#5594e2", stopOpacity: 1 } }),
170
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "11%", style: { stopColor: "#5594e2", stopOpacity: 1 } }),
171
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", style: { stopColor: "#E0E3E8", stopOpacity: 1 } })
172
+ ] }),
173
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
174
+ "marker",
175
+ {
176
+ id: "inverseL",
177
+ viewBox: "0 0 5 10",
178
+ refX: "0.5",
179
+ refY: `${markerRefY}`,
180
+ markerUnits: "strokeWidth",
181
+ markerWidth: "0.5",
182
+ markerHeight: `${markerHeight}`,
183
+ orient: "auto",
184
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z", fill: "#FFF" })
185
+ }
186
+ ),
187
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
188
+ "marker",
189
+ {
190
+ id: "inverseR",
191
+ viewBox: "0 0 5 10",
192
+ refX: "0",
193
+ refY: "5",
194
+ markerUnits: "strokeWidth",
195
+ markerWidth: "0.7",
196
+ markerHeight: `${markerHeight}`,
197
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z", fill: "#FFF" })
198
+ }
199
+ )
200
+ ] }),
201
+ grayTrack,
202
+ !waiting && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { fill: "none", fillRule: "evenodd", stroke: "none", strokeWidth: "1", children: [
203
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
204
+ "path",
205
+ {
206
+ className: classNameElement("arc-blue"),
207
+ d: "M30,5 C17.536025,6 6,17.536027 5,31",
208
+ stroke: "#5594e2",
209
+ strokeWidth: `${strokeWidth - 0.5}px`,
210
+ strokeLinecap: "round",
211
+ "data-testid": "circular-indicator-blue-arc"
212
+ }
213
+ ),
214
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
215
+ "path",
216
+ {
217
+ className: classNameElement("arc-white"),
218
+ d: "M33,5 C17.536027,5 5,17.536027 5,33",
219
+ stroke: "#FFF",
220
+ strokeWidth: `${strokeWidth + 2}px`,
221
+ markerStart: "url(#inverseR)",
222
+ markerEnd: "url(#inverseL)"
223
+ }
224
+ ),
244
225
  grayArc
245
- ]
246
- })
247
- ]
248
- });
249
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
250
- className: classNameBlock("wrapper"),
251
- role: "status",
252
- "aria-hidden": waiting || loading ? "false" : "true",
253
- children: [
254
- buildIndicator(indicator),
255
- showLabel && labelText
256
- ]
257
- });
226
+ ] })
227
+ ]
228
+ }
229
+ );
230
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameBlock("wrapper"), role: "status", "aria-hidden": waiting || loading ? "false" : "true", children: [
231
+ buildIndicator(indicator),
232
+ showLabel && labelText
233
+ ] });
258
234
  };
259
235
  CircularProgressIndicator.defaultProps = {
260
236
  size: "m",
package/dist/cjs/DSCircularProgressIndicator.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSCircularProgressIndicator.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n const waitingLabel = 'Waiting...';\n const loadingLabel = 'Loading...';\n const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n let sizePx;\n let sizeLabel;\n let strokeWidth;\n let trackWidth;\n let markerHeight = '0.7';\n let markerRefY = '4.8';\n let grayArcStrokeDasharray = '45 170';\n let grayArcStrokeDashoffset = '127.5';\n\n switch (size.toUpperCase()) {\n case 'XS':\n sizePx = 8;\n sizeLabel = 12;\n strokeWidth = 10;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'S':\n sizePx = 16;\n sizeLabel = 12;\n strokeWidth = 8;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'M':\n sizePx = 24;\n sizeLabel = 12;\n strokeWidth = 7;\n trackWidth = 3;\n markerHeight = '1';\n markerRefY = '5.5';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'L':\n sizePx = 32;\n sizeLabel = 13;\n strokeWidth = 6;\n trackWidth = 3;\n markerRefY = '5';\n break;\n case 'XL':\n sizePx = 48;\n sizeLabel = 14;\n strokeWidth = 5;\n trackWidth = 1;\n break;\n case 'XXL':\n sizePx = 56;\n sizeLabel = 16;\n strokeWidth = 4;\n trackWidth = 1;\n break;\n case 'XXXL':\n sizePx = 64;\n sizeLabel = 16;\n strokeWidth = 5;\n trackWidth = 2;\n break;\n default:\n break;\n }\n\n const labelText = (\n <p\n data-testid=\"circular-indicator-label\"\n className={classNameElement('label')}\n style={{ fontSize: `${sizeLabel}px` }}\n >\n {currentLabel}\n </p>\n );\n\n // Only adds the tooltip if sizePx < 17 or showTooltip is true\n const buildIndicator = (Component: JSX.Element) =>\n sizePx < 17 || showTooltip ? (\n <DSTooltip\n containerProps={{\n id: 'ds-circular-progress-indicator',\n 'data-testid': 'circular-indicator-title',\n }}\n interactionType=\"hover\"\n title={currentLabel}\n triggerComponent={Component}\n placement=\"bottom\"\n />\n ) : (\n Component\n );\n\n const grayTrack = (\n <circle\n className={classNameElement('track')}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const grayArc = (\n <circle\n className={classNameElement('arc-gray')}\n stroke=\"#E0E3E8\"\n strokeDasharray={`${grayArcStrokeDasharray}`}\n strokeDashoffset={`${grayArcStrokeDashoffset}`}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const indicator = (\n <svg\n height={`${sizePx}px`}\n version=\"1.1\"\n viewBox=\"0 0 66 66\"\n width={`${sizePx}px`}\n data-testid=\"circular-indicator\"\n >\n <defs>\n <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n </linearGradient>\n <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n </linearGradient>\n <marker\n id=\"inverseL\"\n viewBox=\"0 0 5 10\"\n refX=\"0.5\"\n refY={`${markerRefY}`}\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.5\"\n markerHeight={`${markerHeight}`}\n orient=\"auto\"\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n <marker\n id=\"inverseR\"\n viewBox=\"0 0 5 10\"\n refX=\"0\"\n refY=\"5\"\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.7\"\n markerHeight={`${markerHeight}`}\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n </defs>\n {grayTrack}\n {!waiting && (\n <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n <path\n className={classNameElement('arc-blue')}\n d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n stroke=\"#5594e2\"\n strokeWidth={`${strokeWidth - 0.5}px`}\n strokeLinecap=\"round\"\n data-testid=\"circular-indicator-blue-arc\"\n />\n <path\n className={classNameElement('arc-white')}\n d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n stroke=\"#FFF\"\n strokeWidth={`${strokeWidth + 2}px`}\n markerStart=\"url(#inverseR)\"\n markerEnd=\"url(#inverseL)\"\n />\n {grayArc}\n </g>\n )}\n </svg>\n );\n\n return (\n <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n {buildIndicator(indicator)}\n {showLabel && labelText}\n </div>\n );\n};\n\nCircularProgressIndicator.defaultProps = {\n size: 'm',\n showLabel: false,\n showTooltip: false,\n waiting: false,\n loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n .description('Defines the size of the indicator')\n .defaultValue('m'),\n showLabel: PropTypes.bool\n .description('Wheter the indicator displays its state on a label or not')\n .defaultValue(false),\n showTooltip: PropTypes.bool\n .description('Wheter the indicator displays its state on a tooltip or not')\n .defaultValue(false),\n waiting: PropTypes.bool\n .description('Defines the state of the indicator as Waiting and only displays the gray track')\n .defaultValue(false),\n loading: PropTypes.bool\n .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": ["DSTooltip"]
7
7
  }
package/dist/cjs/v2/DSCircularIndeterminateIndicator.js CHANGED
@@ -38,9 +38,7 @@ var import_uid = require("uid");
38
38
  var import_react_desc_prop_types = require("./react-desc-prop-types");
39
39
  var import_constants = require("./constants");
40
40
  var import_styled = require("./styled");
41
- const EmptyComp = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
42
- children: props.children
43
- });
41
+ const EmptyComp = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
44
42
  const DSCircularIndeterminateIndicator = (props) => {
45
43
  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(
46
44
  props,
@@ -51,79 +49,43 @@ const DSCircularIndeterminateIndicator = (props) => {
51
49
  const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
52
50
  const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
53
51
  const circleRadius = (0, import_react.useMemo)(() => (import_constants.sizeToPx[size] - Number.parseInt(import_constants.sizeToWeight[size], 10)) / 2, [size]);
54
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
55
- gutter: "xs",
56
- justifyContent: "center",
57
- role: "status",
58
- "aria-label": text || "Loading...",
59
- ...globalAttributes,
60
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, {
61
- text,
62
- textAlign: "center",
63
- startPlacementPreference: tooltipStartPlacementPreference,
64
- children: [
65
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledSvg, {
66
- width: import_constants.sizeToPx[size],
67
- height: import_constants.sizeToPx[size],
68
- children: [
69
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", {
70
- children: [
71
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", {
72
- id: `not-gradient-clip-${uniqueId}`,
73
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRect, {
74
- x: "0%",
75
- y: "0%",
76
- width: "52%",
77
- height: "100%"
78
- })
79
- }),
80
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
81
- id: `gradient-color-${uniqueId}`,
82
- x1: "0%",
83
- x2: "0%",
84
- y1: "0%",
85
- y2: "100%",
86
- children: [
87
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
88
- offset: "10%",
89
- stopColor: `${import_constants.colorToHex[color]}00`
90
- }),
91
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
92
- offset: "90%",
93
- stopColor: `${import_constants.colorToHex[color]}FF`
94
- })
95
- ]
96
- })
97
- ]
98
- }),
99
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCircle, {
100
- cx: "50%",
101
- cy: "50%",
102
- r: circleRadius,
103
- strokeWidth: import_constants.sizeToWeight[size],
104
- stroke: import_constants.colorToHex[color],
105
- strokeLinecap: "round",
106
- clipPath: `url(#not-gradient-clip-${uniqueId})`
107
- }),
108
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPath, {
109
- d: `M ${import_constants.sizeToPx[size] / 2} ${import_constants.sizeToPx[size] / 2}
52
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { gutter: "xs", justifyContent: "center", role: "status", "aria-label": text || "Loading...", ...globalAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
53
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledSvg, { width: import_constants.sizeToPx[size], height: import_constants.sizeToPx[size], children: [
54
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
55
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
56
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
57
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "10%", stopColor: `${import_constants.colorToHex[color]}00` }),
58
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "90%", stopColor: `${import_constants.colorToHex[color]}FF` })
59
+ ] })
60
+ ] }),
61
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
+ import_styled.StyledCircle,
63
+ {
64
+ cx: "50%",
65
+ cy: "50%",
66
+ r: circleRadius,
67
+ strokeWidth: import_constants.sizeToWeight[size],
68
+ stroke: import_constants.colorToHex[color],
69
+ strokeLinecap: "round",
70
+ clipPath: `url(#not-gradient-clip-${uniqueId})`
71
+ }
72
+ ),
73
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
+ import_styled.StyledPath,
75
+ {
76
+ d: `M ${import_constants.sizeToPx[size] / 2} ${import_constants.sizeToPx[size] / 2}
110
77
  m ${circleRadius}, 0
111
78
  a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
112
- strokeWidth: import_constants.sizeToWeight[size],
113
- fill: "transparent",
114
- stroke: `url(#gradient-color-${uniqueId})`,
115
- strokeLinecap: "round",
116
- r: circleRadius
117
- })
118
- ]
119
- }),
120
- text !== "" && showText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
121
- style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: import_constants.sizeToTextSize[size] },
122
- children: text
123
- })
124
- ]
125
- })
126
- });
79
+ strokeWidth: import_constants.sizeToWeight[size],
80
+ fill: "transparent",
81
+ stroke: `url(#gradient-color-${uniqueId})`,
82
+ strokeLinecap: "round",
83
+ r: circleRadius
84
+ }
85
+ )
86
+ ] }),
87
+ text !== "" && showText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: import_constants.sizeToTextSize[size] }, children: text })
88
+ ] }) });
127
89
  };
128
90
  DSCircularIndeterminateIndicator.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
129
91
  DSCircularIndeterminateIndicator.displayName = "DSCircularIndeterminateIndicator";
package/dist/cjs/v2/DSCircularIndeterminateIndicator.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/v2/DSCircularIndeterminateIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n props,\n) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n props,\n defaultProps,\n );\n const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n const uniqueId = useMemo(() => uid(16), []);\n\n const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n <defs>\n <clipPath id={`not-gradient-clip-${uniqueId}`}>\n <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n </clipPath>\n <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n </linearGradient>\n </defs>\n <StyledCircle\n cx=\"50%\"\n cy=\"50%\"\n r={circleRadius}\n strokeWidth={sizeToWeight[size]}\n stroke={colorToHex[color]}\n strokeLinecap=\"round\"\n clipPath={`url(#not-gradient-clip-${uniqueId})`}\n />\n {/* \n Here we are using a path because:\n - Flexible enough to build a circle\n - When rotating, the gradient follows the rotation!!! (This is key)\n - We can use the rotation with keyframes, allowing for custom timing\n \n Using a circle does not pass point 2.\n Animating the gradient is not posible with custom timings.\n This is the best solution without using a custom library.\n */}\n <StyledPath\n d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n m ${circleRadius}, 0\n a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n strokeWidth={sizeToWeight[size]}\n fill=\"transparent\"\n stroke={`url(#gradient-color-${uniqueId})`}\n strokeLinecap=\"round\"\n r={circleRadius}\n />\n </StyledSvg>\n {text !== '' && showText && (\n <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n {text}\n </span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADY0B;AAXjD,mBAA+B;AAC/B,qBAAqB;AACrB,wBAA4B;AAC5B,0BAA+E;AAC/E,iBAAoB;AAEpB,mCAAsE;AACtE,uBAAmE;AACnE,oBAAgE;AAGhE,MAAM,YAAgC,CAAC,UAAU;AAAA,EAAG,gBAAM;AAAA,CAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,iBAAiB,QAAI,4CAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;AAEtF,QAAM,cAA8B,sBAAQ,MAAO,cAAc,gCAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,eAAW,sBAAQ,UAAM,gBAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,mBAAe,sBAAQ,OAAO,0BAAS,QAAQ,OAAO,SAAS,8BAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,4CAAC;AAAA,IAAK,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,IAAe,GAAG;AAAA,IAC5F,uDAAC;AAAA,MAAQ;AAAA,MAAY,WAAU;AAAA,MAAS,0BAA0B;AAAA,MAChE;AAAA,qDAAC;AAAA,UAAU,OAAO,0BAAS;AAAA,UAAO,QAAQ,0BAAS;AAAA,UACjD;AAAA,yDAAC;AAAA,cACC;AAAA,4DAAC;AAAA,kBAAS,IAAI,qBAAqB;AAAA,kBACjC,sDAAC;AAAA,oBAAW,GAAE;AAAA,oBAAK,GAAE;AAAA,oBAAK,OAAM;AAAA,oBAAM,QAAO;AAAA,mBAAO;AAAA,iBACtD;AAAA,gBACA,6CAAC;AAAA,kBAAe,IAAI,kBAAkB;AAAA,kBAAY,IAAG;AAAA,kBAAK,IAAG;AAAA,kBAAK,IAAG;AAAA,kBAAK,IAAG;AAAA,kBAC3E;AAAA,gEAAC;AAAA,sBAAK,QAAO;AAAA,sBAAM,WAAW,GAAG,4BAAW;AAAA,qBAAY;AAAA,oBACxD,4CAAC;AAAA,sBAAK,QAAO;AAAA,sBAAM,WAAW,GAAG,4BAAW;AAAA,qBAAY;AAAA;AAAA,iBAC1D;AAAA;AAAA,aACF;AAAA,YACA,4CAAC;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAG;AAAA,cACH,aAAa,8BAAa;AAAA,cAC1B,QAAQ,4BAAW;AAAA,cACnB,eAAc;AAAA,cACd,UAAU,0BAA0B;AAAA,aACtC;AAAA,YAWA,4CAAC;AAAA,cACC,GAAG,KAAK,0BAAS,QAAQ,KAAK,0BAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,cAClE,aAAa,8BAAa;AAAA,cAC1B,MAAK;AAAA,cACL,QAAQ,uBAAuB;AAAA,cAC/B,eAAc;AAAA,cACd,GAAG;AAAA,aACL;AAAA;AAAA,SACF;AAAA,QACC,SAAS,MAAM,YACd,4CAAC;AAAA,UAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,gCAAe,MAAM;AAAA,UAC/F;AAAA,SACH;AAAA;AAAA,KAEJ;AAAA,GACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,iDAA6C,8BAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADY0B;AAXjD,mBAA+B;AAC/B,qBAAqB;AACrB,wBAA4B;AAC5B,0BAA+E;AAC/E,iBAAoB;AAEpB,mCAAsE;AACtE,uBAAmE;AACnE,oBAAgE;AAGhE,MAAM,YAAgC,CAAC,UAAU,2EAAG,gBAAM,UAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,iBAAiB,QAAI,4CAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;AAEtF,QAAM,cAA8B,sBAAQ,MAAO,cAAc,gCAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,eAAW,sBAAQ,UAAM,gBAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,mBAAe,sBAAQ,OAAO,0BAAS,QAAQ,OAAO,SAAS,8BAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,4CAAC,uBAAK,QAAO,MAAK,gBAAe,UAAS,MAAK,UAAS,cAAY,QAAQ,cAAe,GAAG,kBAC5F,uDAAC,WAAQ,MAAY,WAAU,UAAS,0BAA0B,iCAChE;AAAA,iDAAC,2BAAU,OAAO,0BAAS,OAAO,QAAQ,0BAAS,OACjD;AAAA,mDAAC,UACC;AAAA,oDAAC,cAAS,IAAI,qBAAqB,YACjC,sDAAC,4BAAW,GAAE,MAAK,GAAE,MAAK,OAAM,OAAM,QAAO,QAAO,GACtD;AAAA,QACA,6CAAC,oBAAe,IAAI,kBAAkB,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,QAC3E;AAAA,sDAAC,UAAK,QAAO,OAAM,WAAW,GAAG,4BAAW,YAAY;AAAA,UACxD,4CAAC,UAAK,QAAO,OAAM,WAAW,GAAG,4BAAW,YAAY;AAAA,WAC1D;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,IAAG;AAAA,UACH,GAAG;AAAA,UACH,aAAa,8BAAa;AAAA,UAC1B,QAAQ,4BAAW;AAAA,UACnB,eAAc;AAAA,UACd,UAAU,0BAA0B;AAAA;AAAA,MACtC;AAAA,MAWA;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,KAAK,0BAAS,QAAQ,KAAK,0BAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,UAClE,aAAa,8BAAa;AAAA,UAC1B,MAAK;AAAA,UACL,QAAQ,uBAAuB;AAAA,UAC/B,eAAc;AAAA,UACd,GAAG;AAAA;AAAA,MACL;AAAA,OACF;AAAA,IACC,SAAS,MAAM,YACd,4CAAC,UAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,gCAAe,MAAM,GAC/F,gBACH;AAAA,KAEJ,GACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,iDAA6C,8BAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/esm/DSCircularProgressIndicator.js CHANGED
@@ -73,158 +73,134 @@ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, load
73
73
  default:
74
74
  break;
75
75
  }
76
- const labelText = /* @__PURE__ */ jsx("p", {
77
- "data-testid": "circular-indicator-label",
78
- className: classNameElement("label"),
79
- style: { fontSize: `${sizeLabel}px` },
80
- children: currentLabel
81
- });
82
- const buildIndicator = (Component) => sizePx < 17 || showTooltip ? /* @__PURE__ */ jsx(DSTooltip, {
83
- containerProps: {
84
- id: "ds-circular-progress-indicator",
85
- "data-testid": "circular-indicator-title"
86
- },
87
- interactionType: "hover",
88
- title: currentLabel,
89
- triggerComponent: Component,
90
- placement: "bottom"
91
- }) : Component;
92
- const grayTrack = /* @__PURE__ */ jsx("circle", {
93
- className: classNameElement("track"),
94
- cx: "50%",
95
- cy: "50%",
96
- fill: "none",
97
- r: "28",
98
- strokeWidth: `${trackWidth}px`
99
- });
100
- const grayArc = /* @__PURE__ */ jsx("circle", {
101
- className: classNameElement("arc-gray"),
102
- stroke: "#E0E3E8",
103
- strokeDasharray: `${grayArcStrokeDasharray}`,
104
- strokeDashoffset: `${grayArcStrokeDashoffset}`,
105
- cx: "50%",
106
- cy: "50%",
107
- fill: "none",
108
- r: "28",
109
- strokeWidth: `${trackWidth}px`
110
- });
111
- const indicator = /* @__PURE__ */ jsxs("svg", {
112
- height: `${sizePx}px`,
113
- version: "1.1",
114
- viewBox: "0 0 66 66",
115
- width: `${sizePx}px`,
116
- "data-testid": "circular-indicator",
117
- children: [
118
- /* @__PURE__ */ jsxs("defs", {
119
- children: [
120
- /* @__PURE__ */ jsxs("linearGradient", {
121
- id: "grad1",
122
- x1: "0%",
123
- x2: "100%",
124
- y1: "100%",
125
- y2: "0%",
126
- children: [
127
- /* @__PURE__ */ jsx("stop", {
128
- offset: "0%",
129
- style: { stopColor: "#E0E3E8", stopOpacity: 1 }
130
- }),
131
- /* @__PURE__ */ jsx("stop", {
132
- offset: "89%",
133
- style: { stopColor: "#5594e2", stopOpacity: 1 }
134
- }),
135
- /* @__PURE__ */ jsx("stop", {
136
- offset: "100%",
137
- style: { stopColor: "#5594e2", stopOpacity: 1 }
138
- })
139
- ]
140
- }),
141
- /* @__PURE__ */ jsxs("linearGradient", {
142
- id: "grad2",
143
- x1: "0%",
144
- x2: "100%",
145
- y1: "100%",
146
- y2: "0%",
147
- children: [
148
- /* @__PURE__ */ jsx("stop", {
149
- offset: "0%",
150
- style: { stopColor: "#5594e2", stopOpacity: 1 }
151
- }),
152
- /* @__PURE__ */ jsx("stop", {
153
- offset: "11%",
154
- style: { stopColor: "#5594e2", stopOpacity: 1 }
155
- }),
156
- /* @__PURE__ */ jsx("stop", {
157
- offset: "100%",
158
- style: { stopColor: "#E0E3E8", stopOpacity: 1 }
159
- })
160
- ]
161
- }),
162
- /* @__PURE__ */ jsx("marker", {
163
- id: "inverseL",
164
- viewBox: "0 0 5 10",
165
- refX: "0.5",
166
- refY: `${markerRefY}`,
167
- markerUnits: "strokeWidth",
168
- markerWidth: "0.5",
169
- markerHeight: `${markerHeight}`,
170
- orient: "auto",
171
- children: /* @__PURE__ */ jsx("path", {
172
- d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
173
- fill: "#FFF"
174
- })
175
- }),
176
- /* @__PURE__ */ jsx("marker", {
177
- id: "inverseR",
178
- viewBox: "0 0 5 10",
179
- refX: "0",
180
- refY: "5",
181
- markerUnits: "strokeWidth",
182
- markerWidth: "0.7",
183
- markerHeight: `${markerHeight}`,
184
- children: /* @__PURE__ */ jsx("path", {
185
- d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
186
- fill: "#FFF"
187
- })
188
- })
189
- ]
190
- }),
191
- grayTrack,
192
- !waiting && /* @__PURE__ */ jsxs("g", {
193
- fill: "none",
194
- fillRule: "evenodd",
195
- stroke: "none",
196
- strokeWidth: "1",
197
- children: [
198
- /* @__PURE__ */ jsx("path", {
199
- className: classNameElement("arc-blue"),
200
- d: "M30,5 C17.536025,6 6,17.536027 5,31",
201
- stroke: "#5594e2",
202
- strokeWidth: `${strokeWidth - 0.5}px`,
203
- strokeLinecap: "round",
204
- "data-testid": "circular-indicator-blue-arc"
205
- }),
206
- /* @__PURE__ */ jsx("path", {
207
- className: classNameElement("arc-white"),
208
- d: "M33,5 C17.536027,5 5,17.536027 5,33",
209
- stroke: "#FFF",
210
- strokeWidth: `${strokeWidth + 2}px`,
211
- markerStart: "url(#inverseR)",
212
- markerEnd: "url(#inverseL)"
213
- }),
76
+ const labelText = /* @__PURE__ */ jsx(
77
+ "p",
78
+ {
79
+ "data-testid": "circular-indicator-label",
80
+ className: classNameElement("label"),
81
+ style: { fontSize: `${sizeLabel}px` },
82
+ children: currentLabel
83
+ }
84
+ );
85
+ const buildIndicator = (Component) => sizePx < 17 || showTooltip ? /* @__PURE__ */ jsx(
86
+ DSTooltip,
87
+ {
88
+ containerProps: {
89
+ id: "ds-circular-progress-indicator",
90
+ "data-testid": "circular-indicator-title"
91
+ },
92
+ interactionType: "hover",
93
+ title: currentLabel,
94
+ triggerComponent: Component,
95
+ placement: "bottom"
96
+ }
97
+ ) : Component;
98
+ const grayTrack = /* @__PURE__ */ jsx(
99
+ "circle",
100
+ {
101
+ className: classNameElement("track"),
102
+ cx: "50%",
103
+ cy: "50%",
104
+ fill: "none",
105
+ r: "28",
106
+ strokeWidth: `${trackWidth}px`
107
+ }
108
+ );
109
+ const grayArc = /* @__PURE__ */ jsx(
110
+ "circle",
111
+ {
112
+ className: classNameElement("arc-gray"),
113
+ stroke: "#E0E3E8",
114
+ strokeDasharray: `${grayArcStrokeDasharray}`,
115
+ strokeDashoffset: `${grayArcStrokeDashoffset}`,
116
+ cx: "50%",
117
+ cy: "50%",
118
+ fill: "none",
119
+ r: "28",
120
+ strokeWidth: `${trackWidth}px`
121
+ }
122
+ );
123
+ const indicator = /* @__PURE__ */ jsxs(
124
+ "svg",
125
+ {
126
+ height: `${sizePx}px`,
127
+ version: "1.1",
128
+ viewBox: "0 0 66 66",
129
+ width: `${sizePx}px`,
130
+ "data-testid": "circular-indicator",
131
+ children: [
132
+ /* @__PURE__ */ jsxs("defs", { children: [
133
+ /* @__PURE__ */ jsxs("linearGradient", { id: "grad1", x1: "0%", x2: "100%", y1: "100%", y2: "0%", children: [
134
+ /* @__PURE__ */ jsx("stop", { offset: "0%", style: { stopColor: "#E0E3E8", stopOpacity: 1 } }),
135
+ /* @__PURE__ */ jsx("stop", { offset: "89%", style: { stopColor: "#5594e2", stopOpacity: 1 } }),
136
+ /* @__PURE__ */ jsx("stop", { offset: "100%", style: { stopColor: "#5594e2", stopOpacity: 1 } })
137
+ ] }),
138
+ /* @__PURE__ */ jsxs("linearGradient", { id: "grad2", x1: "0%", x2: "100%", y1: "100%", y2: "0%", children: [
139
+ /* @__PURE__ */ jsx("stop", { offset: "0%", style: { stopColor: "#5594e2", stopOpacity: 1 } }),
140
+ /* @__PURE__ */ jsx("stop", { offset: "11%", style: { stopColor: "#5594e2", stopOpacity: 1 } }),
141
+ /* @__PURE__ */ jsx("stop", { offset: "100%", style: { stopColor: "#E0E3E8", stopOpacity: 1 } })
142
+ ] }),
143
+ /* @__PURE__ */ jsx(
144
+ "marker",
145
+ {
146
+ id: "inverseL",
147
+ viewBox: "0 0 5 10",
148
+ refX: "0.5",
149
+ refY: `${markerRefY}`,
150
+ markerUnits: "strokeWidth",
151
+ markerWidth: "0.5",
152
+ markerHeight: `${markerHeight}`,
153
+ orient: "auto",
154
+ children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z", fill: "#FFF" })
155
+ }
156
+ ),
157
+ /* @__PURE__ */ jsx(
158
+ "marker",
159
+ {
160
+ id: "inverseR",
161
+ viewBox: "0 0 5 10",
162
+ refX: "0",
163
+ refY: "5",
164
+ markerUnits: "strokeWidth",
165
+ markerWidth: "0.7",
166
+ markerHeight: `${markerHeight}`,
167
+ children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z", fill: "#FFF" })
168
+ }
169
+ )
170
+ ] }),
171
+ grayTrack,
172
+ !waiting && /* @__PURE__ */ jsxs("g", { fill: "none", fillRule: "evenodd", stroke: "none", strokeWidth: "1", children: [
173
+ /* @__PURE__ */ jsx(
174
+ "path",
175
+ {
176
+ className: classNameElement("arc-blue"),
177
+ d: "M30,5 C17.536025,6 6,17.536027 5,31",
178
+ stroke: "#5594e2",
179
+ strokeWidth: `${strokeWidth - 0.5}px`,
180
+ strokeLinecap: "round",
181
+ "data-testid": "circular-indicator-blue-arc"
182
+ }
183
+ ),
184
+ /* @__PURE__ */ jsx(
185
+ "path",
186
+ {
187
+ className: classNameElement("arc-white"),
188
+ d: "M33,5 C17.536027,5 5,17.536027 5,33",
189
+ stroke: "#FFF",
190
+ strokeWidth: `${strokeWidth + 2}px`,
191
+ markerStart: "url(#inverseR)",
192
+ markerEnd: "url(#inverseL)"
193
+ }
194
+ ),
214
195
  grayArc
215
- ]
216
- })
217
- ]
218
- });
219
- return /* @__PURE__ */ jsxs("div", {
220
- className: classNameBlock("wrapper"),
221
- role: "status",
222
- "aria-hidden": waiting || loading ? "false" : "true",
223
- children: [
224
- buildIndicator(indicator),
225
- showLabel && labelText
226
- ]
227
- });
196
+ ] })
197
+ ]
198
+ }
199
+ );
200
+ return /* @__PURE__ */ jsxs("div", { className: classNameBlock("wrapper"), role: "status", "aria-hidden": waiting || loading ? "false" : "true", children: [
201
+ buildIndicator(indicator),
202
+ showLabel && labelText
203
+ ] });
228
204
  };
229
205
  CircularProgressIndicator.defaultProps = {
230
206
  size: "m",
package/dist/esm/DSCircularProgressIndicator.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCircularProgressIndicator.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n const waitingLabel = 'Waiting...';\n const loadingLabel = 'Loading...';\n const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n let sizePx;\n let sizeLabel;\n let strokeWidth;\n let trackWidth;\n let markerHeight = '0.7';\n let markerRefY = '4.8';\n let grayArcStrokeDasharray = '45 170';\n let grayArcStrokeDashoffset = '127.5';\n\n switch (size.toUpperCase()) {\n case 'XS':\n sizePx = 8;\n sizeLabel = 12;\n strokeWidth = 10;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'S':\n sizePx = 16;\n sizeLabel = 12;\n strokeWidth = 8;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'M':\n sizePx = 24;\n sizeLabel = 12;\n strokeWidth = 7;\n trackWidth = 3;\n markerHeight = '1';\n markerRefY = '5.5';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'L':\n sizePx = 32;\n sizeLabel = 13;\n strokeWidth = 6;\n trackWidth = 3;\n markerRefY = '5';\n break;\n case 'XL':\n sizePx = 48;\n sizeLabel = 14;\n strokeWidth = 5;\n trackWidth = 1;\n break;\n case 'XXL':\n sizePx = 56;\n sizeLabel = 16;\n strokeWidth = 4;\n trackWidth = 1;\n break;\n case 'XXXL':\n sizePx = 64;\n sizeLabel = 16;\n strokeWidth = 5;\n trackWidth = 2;\n break;\n default:\n break;\n }\n\n const labelText = (\n <p\n data-testid=\"circular-indicator-label\"\n className={classNameElement('label')}\n style={{ fontSize: `${sizeLabel}px` }}\n >\n {currentLabel}\n </p>\n );\n\n // Only adds the tooltip if sizePx < 17 or showTooltip is true\n const buildIndicator = (Component: JSX.Element) =>\n sizePx < 17 || showTooltip ? (\n <DSTooltip\n containerProps={{\n id: 'ds-circular-progress-indicator',\n 'data-testid': 'circular-indicator-title',\n }}\n interactionType=\"hover\"\n title={currentLabel}\n triggerComponent={Component}\n placement=\"bottom\"\n />\n ) : (\n Component\n );\n\n const grayTrack = (\n <circle\n className={classNameElement('track')}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const grayArc = (\n <circle\n className={classNameElement('arc-gray')}\n stroke=\"#E0E3E8\"\n strokeDasharray={`${grayArcStrokeDasharray}`}\n strokeDashoffset={`${grayArcStrokeDashoffset}`}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const indicator = (\n <svg\n height={`${sizePx}px`}\n version=\"1.1\"\n viewBox=\"0 0 66 66\"\n width={`${sizePx}px`}\n data-testid=\"circular-indicator\"\n >\n <defs>\n <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n </linearGradient>\n <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n </linearGradient>\n <marker\n id=\"inverseL\"\n viewBox=\"0 0 5 10\"\n refX=\"0.5\"\n refY={`${markerRefY}`}\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.5\"\n markerHeight={`${markerHeight}`}\n orient=\"auto\"\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n <marker\n id=\"inverseR\"\n viewBox=\"0 0 5 10\"\n refX=\"0\"\n refY=\"5\"\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.7\"\n markerHeight={`${markerHeight}`}\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n </defs>\n {grayTrack}\n {!waiting && (\n <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n <path\n className={classNameElement('arc-blue')}\n d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n stroke=\"#5594e2\"\n strokeWidth={`${strokeWidth - 0.5}px`}\n strokeLinecap=\"round\"\n data-testid=\"circular-indicator-blue-arc\"\n />\n <path\n className={classNameElement('arc-white')}\n d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n stroke=\"#FFF\"\n strokeWidth={`${strokeWidth + 2}px`}\n markerStart=\"url(#inverseR)\"\n markerEnd=\"url(#inverseL)\"\n />\n {grayArc}\n </g>\n )}\n </svg>\n );\n\n return (\n <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n {buildIndicator(indicator)}\n {showLabel && labelText}\n </div>\n );\n};\n\nCircularProgressIndicator.defaultProps = {\n size: 'm',\n showLabel: false,\n showTooltip: false,\n waiting: false,\n loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n .description('Defines the size of the indicator')\n .defaultValue('m'),\n showLabel: PropTypes.bool\n .description('Wheter the indicator displays its state on a label or not')\n .defaultValue(false),\n showTooltip: PropTypes.bool\n .description('Wheter the indicator displays its state on a tooltip or not')\n .defaultValue(false),\n waiting: PropTypes.bool\n .description('Defines the state of the indicator as Waiting and only displays the gray track')\n .defaultValue(false),\n loading: PropTypes.bool\n .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACkFnB,cA4DI,YA5DJ;AA9EJ,SAAS,UAAU,iBAAiB;AACpC,SAAS,iCAAiC;AAC1C,OAAO,eAAe;AAEtB,MAAM,EAAE,gBAAgB,iBAAiB,IAAI,0BAA0B,6BAA6B;AAEpG,MAAM,4BAA4B,CAAC,EAAE,MAAM,WAAW,aAAa,SAAS,QAAQ,MAAM;AACxF,QAAM,eAAe;AACrB,QAAM,eAAe;AACrB,QAAM,eAAe,WAAW,CAAC,UAAU,eAAe;AAC1D,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI,eAAe;AACnB,MAAI,aAAa;AACjB,MAAI,yBAAyB;AAC7B,MAAI,0BAA0B;AAE9B,UAAQ,KAAK,YAAY,GAAG;AAAA,IAC1B,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,mBAAa;AACb,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,mBAAa;AACb;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,IACF;AACE;AAAA,EACJ;AAEA,QAAM,YACJ,oBAAC;AAAA,IACC,eAAY;AAAA,IACZ,WAAW,iBAAiB,OAAO;AAAA,IACnC,OAAO,EAAE,UAAU,GAAG,cAAc;AAAA,IAEnC;AAAA,GACH;AAIF,QAAM,iBAAiB,CAAC,cACtB,SAAS,MAAM,cACb,oBAAC;AAAA,IACC,gBAAgB;AAAA,MACd,IAAI;AAAA,MACJ,eAAe;AAAA,IACjB;AAAA,IACA,iBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,WAAU;AAAA,GACZ,IAEA;AAGJ,QAAM,YACJ,oBAAC;AAAA,IACC,WAAW,iBAAiB,OAAO;AAAA,IACnC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,MAAK;AAAA,IACL,GAAE;AAAA,IACF,aAAa,GAAG;AAAA,GAClB;AAGF,QAAM,UACJ,oBAAC;AAAA,IACC,WAAW,iBAAiB,UAAU;AAAA,IACtC,QAAO;AAAA,IACP,iBAAiB,GAAG;AAAA,IACpB,kBAAkB,GAAG;AAAA,IACrB,IAAG;AAAA,IACH,IAAG;AAAA,IACH,MAAK;AAAA,IACL,GAAE;AAAA,IACF,aAAa,GAAG;AAAA,GAClB;AAGF,QAAM,YACJ,qBAAC;AAAA,IACC,QAAQ,GAAG;AAAA,IACX,SAAQ;AAAA,IACR,SAAQ;AAAA,IACR,OAAO,GAAG;AAAA,IACV,eAAY;AAAA,IAEZ;AAAA,2BAAC;AAAA,QACC;AAAA,+BAAC;AAAA,YAAe,IAAG;AAAA,YAAQ,IAAG;AAAA,YAAK,IAAG;AAAA,YAAO,IAAG;AAAA,YAAO,IAAG;AAAA,YACxD;AAAA,kCAAC;AAAA,gBAAK,QAAO;AAAA,gBAAK,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,eAAG;AAAA,cACnE,oBAAC;AAAA,gBAAK,QAAO;AAAA,gBAAM,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,eAAG;AAAA,cACpE,oBAAC;AAAA,gBAAK,QAAO;AAAA,gBAAO,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,eAAG;AAAA;AAAA,WACvE;AAAA,UACA,qBAAC;AAAA,YAAe,IAAG;AAAA,YAAQ,IAAG;AAAA,YAAK,IAAG;AAAA,YAAO,IAAG;AAAA,YAAO,IAAG;AAAA,YACxD;AAAA,kCAAC;AAAA,gBAAK,QAAO;AAAA,gBAAK,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,eAAG;AAAA,cACnE,oBAAC;AAAA,gBAAK,QAAO;AAAA,gBAAM,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,eAAG;AAAA,cACpE,oBAAC;AAAA,gBAAK,QAAO;AAAA,gBAAO,OAAO,EAAE,WAAW,WAAW,aAAa,EAAE;AAAA,eAAG;AAAA;AAAA,WACvE;AAAA,UACA,oBAAC;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAM,GAAG;AAAA,YACT,aAAY;AAAA,YACZ,aAAY;AAAA,YACZ,cAAc,GAAG;AAAA,YACjB,QAAO;AAAA,YAEP,8BAAC;AAAA,cAAK,GAAE;AAAA,cAAwC,MAAK;AAAA,aAAO;AAAA,WAC9D;AAAA,UACA,oBAAC;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAK;AAAA,YACL,aAAY;AAAA,YACZ,aAAY;AAAA,YACZ,cAAc,GAAG;AAAA,YAEjB,8BAAC;AAAA,cAAK,GAAE;AAAA,cAAwC,MAAK;AAAA,aAAO;AAAA,WAC9D;AAAA;AAAA,OACF;AAAA,MACC;AAAA,MACA,CAAC,WACA,qBAAC;AAAA,QAAE,MAAK;AAAA,QAAO,UAAS;AAAA,QAAU,QAAO;AAAA,QAAO,aAAY;AAAA,QAC1D;AAAA,8BAAC;AAAA,YACC,WAAW,iBAAiB,UAAU;AAAA,YACtC,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAa,GAAG,cAAc;AAAA,YAC9B,eAAc;AAAA,YACd,eAAY;AAAA,WACd;AAAA,UACA,oBAAC;AAAA,YACC,WAAW,iBAAiB,WAAW;AAAA,YACvC,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAa,GAAG,cAAc;AAAA,YAC9B,aAAY;AAAA,YACZ,WAAU;AAAA,WACZ;AAAA,UACC;AAAA;AAAA,OACH;AAAA;AAAA,GAEJ;AAGF,SACE,qBAAC;AAAA,IAAI,WAAW,eAAe,SAAS;AAAA,IAAG,MAAK;AAAA,IAAS,eAAa,WAAW,UAAU,UAAU;AAAA,IAClG;AAAA,qBAAe,SAAS;AAAA,MACxB,aAAa;AAAA;AAAA,GAChB;AAEJ;AAEA,0BAA0B,eAAe;AAAA,EACvC,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iCAAiC;AAAA,EACrC,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,OAAO,MAAM,CAAC,EAC7D,YAAY,mCAAmC,EAC/C,aAAa,GAAG;AAAA,EACnB,WAAW,UAAU,KAClB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EACrB,aAAa,UAAU,KACpB,YAAY,6DAA6D,EACzE,aAAa,KAAK;AAAA,EACrB,SAAS,UAAU,KAChB,YAAY,gFAAgF,EAC5F,aAAa,KAAK;AAAA,EACrB,SAAS,UAAU,KAChB,YAAY,qFAAqF,EACjG,aAAa,KAAK;AACvB;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,SAAS,yBAAyB;AAC9E,oCAAoC,YAAY;AAGhD,IAAO,sCAAQ;",
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/v2/DSCircularIndeterminateIndicator.js CHANGED
@@ -8,9 +8,7 @@ import { uid } from "uid";
8
8
  import { CircularIndeterminateIndicatorPropTypes, defaultProps } from "./react-desc-prop-types";
9
9
  import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants";
10
10
  import { StyledCircle, StyledPath, StyledRect, StyledSvg } from "./styled";
11
- const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, {
12
- children: props.children
13
- });
11
+ const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
14
12
  const DSCircularIndeterminateIndicator = (props) => {
15
13
  const propsWithDefault = useMemoMergePropsWithDefault(
16
14
  props,
@@ -21,79 +19,43 @@ const DSCircularIndeterminateIndicator = (props) => {
21
19
  const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
22
20
  const uniqueId = useMemo(() => uid(16), []);
23
21
  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
24
- return /* @__PURE__ */ jsx(Grid, {
25
- gutter: "xs",
26
- justifyContent: "center",
27
- role: "status",
28
- "aria-label": text || "Loading...",
29
- ...globalAttributes,
30
- children: /* @__PURE__ */ jsxs(Wrapper, {
31
- text,
32
- textAlign: "center",
33
- startPlacementPreference: tooltipStartPlacementPreference,
34
- children: [
35
- /* @__PURE__ */ jsxs(StyledSvg, {
36
- width: sizeToPx[size],
37
- height: sizeToPx[size],
38
- children: [
39
- /* @__PURE__ */ jsxs("defs", {
40
- children: [
41
- /* @__PURE__ */ jsx("clipPath", {
42
- id: `not-gradient-clip-${uniqueId}`,
43
- children: /* @__PURE__ */ jsx(StyledRect, {
44
- x: "0%",
45
- y: "0%",
46
- width: "52%",
47
- height: "100%"
48
- })
49
- }),
50
- /* @__PURE__ */ jsxs("linearGradient", {
51
- id: `gradient-color-${uniqueId}`,
52
- x1: "0%",
53
- x2: "0%",
54
- y1: "0%",
55
- y2: "100%",
56
- children: [
57
- /* @__PURE__ */ jsx("stop", {
58
- offset: "10%",
59
- stopColor: `${colorToHex[color]}00`
60
- }),
61
- /* @__PURE__ */ jsx("stop", {
62
- offset: "90%",
63
- stopColor: `${colorToHex[color]}FF`
64
- })
65
- ]
66
- })
67
- ]
68
- }),
69
- /* @__PURE__ */ jsx(StyledCircle, {
70
- cx: "50%",
71
- cy: "50%",
72
- r: circleRadius,
73
- strokeWidth: sizeToWeight[size],
74
- stroke: colorToHex[color],
75
- strokeLinecap: "round",
76
- clipPath: `url(#not-gradient-clip-${uniqueId})`
77
- }),
78
- /* @__PURE__ */ jsx(StyledPath, {
79
- d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
22
+ return /* @__PURE__ */ jsx(Grid, { gutter: "xs", justifyContent: "center", role: "status", "aria-label": text || "Loading...", ...globalAttributes, children: /* @__PURE__ */ jsxs(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
23
+ /* @__PURE__ */ jsxs(StyledSvg, { width: sizeToPx[size], height: sizeToPx[size], children: [
24
+ /* @__PURE__ */ jsxs("defs", { children: [
25
+ /* @__PURE__ */ jsx("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ jsx(StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
26
+ /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
27
+ /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${colorToHex[color]}00` }),
28
+ /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: `${colorToHex[color]}FF` })
29
+ ] })
30
+ ] }),
31
+ /* @__PURE__ */ jsx(
32
+ StyledCircle,
33
+ {
34
+ cx: "50%",
35
+ cy: "50%",
36
+ r: circleRadius,
37
+ strokeWidth: sizeToWeight[size],
38
+ stroke: colorToHex[color],
39
+ strokeLinecap: "round",
40
+ clipPath: `url(#not-gradient-clip-${uniqueId})`
41
+ }
42
+ ),
43
+ /* @__PURE__ */ jsx(
44
+ StyledPath,
45
+ {
46
+ d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
80
47
  m ${circleRadius}, 0
81
48
  a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
82
- strokeWidth: sizeToWeight[size],
83
- fill: "transparent",
84
- stroke: `url(#gradient-color-${uniqueId})`,
85
- strokeLinecap: "round",
86
- r: circleRadius
87
- })
88
- ]
89
- }),
90
- text !== "" && showText && /* @__PURE__ */ jsx("span", {
91
- style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: sizeToTextSize[size] },
92
- children: text
93
- })
94
- ]
95
- })
96
- });
49
+ strokeWidth: sizeToWeight[size],
50
+ fill: "transparent",
51
+ stroke: `url(#gradient-color-${uniqueId})`,
52
+ strokeLinecap: "round",
53
+ r: circleRadius
54
+ }
55
+ )
56
+ ] }),
57
+ text !== "" && showText && /* @__PURE__ */ jsx("span", { style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: sizeToTextSize[size] }, children: text })
58
+ ] }) });
97
59
  };
98
60
  DSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;
99
61
  DSCircularIndeterminateIndicator.displayName = "DSCircularIndeterminateIndicator";
package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n props,\n) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n props,\n defaultProps,\n );\n const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n const uniqueId = useMemo(() => uid(16), []);\n\n const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n <defs>\n <clipPath id={`not-gradient-clip-${uniqueId}`}>\n <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n </clipPath>\n <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n </linearGradient>\n </defs>\n <StyledCircle\n cx=\"50%\"\n cy=\"50%\"\n r={circleRadius}\n strokeWidth={sizeToWeight[size]}\n stroke={colorToHex[color]}\n strokeLinecap=\"round\"\n clipPath={`url(#not-gradient-clip-${uniqueId})`}\n />\n {/* \n Here we are using a path because:\n - Flexible enough to build a circle\n - When rotating, the gradient follows the rotation!!! (This is key)\n - We can use the rotation with keyframes, allowing for custom timing\n \n Using a circle does not pass point 2.\n Animating the gradient is not posible with custom timings.\n This is the best solution without using a custom library.\n */}\n <StyledPath\n d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n m ${circleRadius}, 0\n a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n strokeWidth={sizeToWeight[size]}\n fill=\"transparent\"\n stroke={`url(#gradient-color-${uniqueId})`}\n strokeLinecap=\"round\"\n r={circleRadius}\n />\n </StyledSvg>\n {text !== '' && showText && (\n <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n {text}\n </span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACY0B,wBA2BrC,YA3BqC;AAXjD,SAAgB,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,UAAU,wBAAwB,oCAAoC;AAC/E,SAAS,WAAW;AAEpB,SAAS,yCAAyC,oBAAoB;AACtE,SAAS,YAAY,UAAU,gBAAgB,oBAAoB;AACnE,SAAS,cAAc,YAAY,YAAY,iBAAiB;AAGhE,MAAM,YAAgC,CAAC,UAAU;AAAA,EAAG,gBAAM;AAAA,CAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,iBAAiB,IAAI,uBAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;AAEtF,QAAM,UAA8B,QAAQ,MAAO,cAAc,cAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,WAAW,QAAQ,MAAM,IAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,eAAe,QAAQ,OAAO,SAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,oBAAC;AAAA,IAAK,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,IAAe,GAAG;AAAA,IAC5F,+BAAC;AAAA,MAAQ;AAAA,MAAY,WAAU;AAAA,MAAS,0BAA0B;AAAA,MAChE;AAAA,6BAAC;AAAA,UAAU,OAAO,SAAS;AAAA,UAAO,QAAQ,SAAS;AAAA,UACjD;AAAA,iCAAC;AAAA,cACC;AAAA,oCAAC;AAAA,kBAAS,IAAI,qBAAqB;AAAA,kBACjC,8BAAC;AAAA,oBAAW,GAAE;AAAA,oBAAK,GAAE;AAAA,oBAAK,OAAM;AAAA,oBAAM,QAAO;AAAA,mBAAO;AAAA,iBACtD;AAAA,gBACA,qBAAC;AAAA,kBAAe,IAAI,kBAAkB;AAAA,kBAAY,IAAG;AAAA,kBAAK,IAAG;AAAA,kBAAK,IAAG;AAAA,kBAAK,IAAG;AAAA,kBAC3E;AAAA,wCAAC;AAAA,sBAAK,QAAO;AAAA,sBAAM,WAAW,GAAG,WAAW;AAAA,qBAAY;AAAA,oBACxD,oBAAC;AAAA,sBAAK,QAAO;AAAA,sBAAM,WAAW,GAAG,WAAW;AAAA,qBAAY;AAAA;AAAA,iBAC1D;AAAA;AAAA,aACF;AAAA,YACA,oBAAC;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAG;AAAA,cACH,aAAa,aAAa;AAAA,cAC1B,QAAQ,WAAW;AAAA,cACnB,eAAc;AAAA,cACd,UAAU,0BAA0B;AAAA,aACtC;AAAA,YAWA,oBAAC;AAAA,cACC,GAAG,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,cAClE,aAAa,aAAa;AAAA,cAC1B,MAAK;AAAA,cACL,QAAQ,uBAAuB;AAAA,cAC/B,eAAc;AAAA,cACd,GAAG;AAAA,aACL;AAAA;AAAA,SACF;AAAA,QACC,SAAS,MAAM,YACd,oBAAC;AAAA,UAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe,MAAM;AAAA,UAC/F;AAAA,SACH;AAAA;AAAA,KAEJ;AAAA,GACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,SAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACY0B,wBA2BrC,YA3BqC;AAXjD,SAAgB,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,UAAU,wBAAwB,oCAAoC;AAC/E,SAAS,WAAW;AAEpB,SAAS,yCAAyC,oBAAoB;AACtE,SAAS,YAAY,UAAU,gBAAgB,oBAAoB;AACnE,SAAS,cAAc,YAAY,YAAY,iBAAiB;AAGhE,MAAM,YAAgC,CAAC,UAAU,gCAAG,gBAAM,UAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,iBAAiB,IAAI,uBAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;AAEtF,QAAM,UAA8B,QAAQ,MAAO,cAAc,cAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,WAAW,QAAQ,MAAM,IAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,eAAe,QAAQ,OAAO,SAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,oBAAC,QAAK,QAAO,MAAK,gBAAe,UAAS,MAAK,UAAS,cAAY,QAAQ,cAAe,GAAG,kBAC5F,+BAAC,WAAQ,MAAY,WAAU,UAAS,0BAA0B,iCAChE;AAAA,yBAAC,aAAU,OAAO,SAAS,OAAO,QAAQ,SAAS,OACjD;AAAA,2BAAC,UACC;AAAA,4BAAC,cAAS,IAAI,qBAAqB,YACjC,8BAAC,cAAW,GAAE,MAAK,GAAE,MAAK,OAAM,OAAM,QAAO,QAAO,GACtD;AAAA,QACA,qBAAC,oBAAe,IAAI,kBAAkB,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,QAC3E;AAAA,8BAAC,UAAK,QAAO,OAAM,WAAW,GAAG,WAAW,YAAY;AAAA,UACxD,oBAAC,UAAK,QAAO,OAAM,WAAW,GAAG,WAAW,YAAY;AAAA,WAC1D;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,IAAG;AAAA,UACH,GAAG;AAAA,UACH,aAAa,aAAa;AAAA,UAC1B,QAAQ,WAAW;AAAA,UACnB,eAAc;AAAA,UACd,UAAU,0BAA0B;AAAA;AAAA,MACtC;AAAA,MAWA;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,UAClE,aAAa,aAAa;AAAA,UAC1B,MAAK;AAAA,UACL,QAAQ,uBAAuB;AAAA,UAC/B,eAAc;AAAA,UACd,GAAG;AAAA;AAAA,MACL;AAAA,OACF;AAAA,IACC,SAAS,MAAM,YACd,oBAAC,UAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe,MAAM,GAC/F,gBACH;AAAA,KAEJ,GACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,SAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-circular-progress-indicator",
3
- "version": "3.12.0-rc.2",
3
+ "version": "3.12.0-rc.21",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Circular progress indicator",
6
6
  "files": [
@@ -51,13 +51,13 @@
51
51
  "indent": 4
52
52
  },
53
53
  "dependencies": {
54
- "@elliemae/ds-classnames": "3.12.0-rc.2",
55
- "@elliemae/ds-grid": "3.12.0-rc.2",
56
- "@elliemae/ds-system": "3.12.0-rc.2",
57
- "@elliemae/ds-tooltip": "3.12.0-rc.2",
58
- "@elliemae/ds-utilities": "3.12.0-rc.2",
59
54
  "styled-components": "~5.3.6",
60
- "uid": "~2.0.0"
55
+ "uid": "~2.0.0",
56
+ "@elliemae/ds-classnames": "3.12.0-rc.21",
57
+ "@elliemae/ds-grid": "3.12.0-rc.21",
58
+ "@elliemae/ds-system": "3.12.0-rc.21",
59
+ "@elliemae/ds-tooltip": "3.12.0-rc.21",
60
+ "@elliemae/ds-utilities": "3.12.0-rc.21"
61
61
  },
62
62
  "devDependencies": {
63
63
  "@testing-library/jest-dom": "~5.16.4",