@elliemae/ds-square-indicator 2.2.0-next.5 → 2.3.0-alpha.3

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.
@@ -1,103 +1,111 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx2 = require('@babel/runtime/helpers/jsx');
6
- require('react');
7
- var dsGrid = require('@elliemae/ds-grid');
8
- var dsTooltip = require('@elliemae/ds-tooltip');
9
- var reactDesc = require('react-desc');
10
- var reactDescPropTypes = require('./react-desc-prop-types.js');
11
- var jsxRuntime = require('react/jsx-runtime');
12
-
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
-
15
- var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
16
-
17
- var _animate;
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var DSSquareIndicator_exports = {};
29
+ __export(DSSquareIndicator_exports, {
30
+ DSSquareIndicator: () => DSSquareIndicator,
31
+ DSSquareIndicatorWithSchema: () => DSSquareIndicatorWithSchema
32
+ });
33
+ var React = __toESM(require("react"));
34
+ var import_react = __toESM(require("react"));
35
+ var import_ds_grid = require("@elliemae/ds-grid");
36
+ var import_ds_tooltip = require("@elliemae/ds-tooltip");
37
+ var import_react_desc = require("react-desc");
38
+ var import_react_desc_prop_types = require("./react-desc-prop-types");
18
39
  const sizeToPx = {
19
- xs: '16px',
20
- s: '24px',
21
- m: '32px',
22
- l: '48px',
23
- xl: '56px',
24
- xxl: '64px'
40
+ xs: "16px",
41
+ s: "24px",
42
+ m: "32px",
43
+ l: "48px",
44
+ xl: "56px",
45
+ xxl: "64px"
25
46
  };
26
47
  const sizeToWeight = {
27
- xs: '3px',
28
- s: '3px',
29
- m: '3px',
30
- l: '4px',
31
- xl: '5px',
32
- xxl: '6px'
48
+ xs: "3px",
49
+ s: "3px",
50
+ m: "3px",
51
+ l: "4px",
52
+ xl: "5px",
53
+ xxl: "6px"
33
54
  };
34
55
  const colorToHex = {
35
- light: '#FFFFFF',
36
- dark: '#0F364A'
56
+ light: "#FFFFFF",
57
+ dark: "#0F364A"
37
58
  };
38
59
  const sizeToTextSize = {
39
- xs: '12px',
40
- s: '12px',
41
- m: '12px',
42
- l: '13px',
43
- xl: '14px',
44
- xxl: '16px'
60
+ xs: "12px",
61
+ s: "12px",
62
+ m: "12px",
63
+ l: "13px",
64
+ xl: "14px",
65
+ xxl: "16px"
45
66
  };
46
- const DSSquareIndicator = _ref => {
47
- let {
48
- size = 'm',
49
- color = 'dark',
50
- text = '',
51
- showText = true,
52
- withTooltip = false,
53
- tooltipStartPlacementPreference = 'bottom'
54
- } = _ref;
55
- const Wrapper = withTooltip ? dsTooltip.DSTooltipV3 : _ref2 => {
56
- let {
57
- children
58
- } = _ref2;
59
- return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
60
- children: children
61
- });
62
- };
63
- return /*#__PURE__*/_jsx2__default["default"](dsGrid.Grid, {
67
+ const DSSquareIndicator = ({
68
+ size = "m",
69
+ color = "dark",
70
+ text = "",
71
+ showText = true,
72
+ withTooltip = false,
73
+ tooltipStartPlacementPreference = "bottom",
74
+ __duration = 2.5
75
+ }) => {
76
+ const Wrapper = withTooltip ? import_ds_tooltip.DSTooltipV3 : ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
77
+ return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
64
78
  gutter: "xs",
65
79
  justifyContent: "center",
66
80
  role: "status"
67
- }, void 0, /*#__PURE__*/_jsx2__default["default"](Wrapper, {
68
- text: text,
81
+ }, /* @__PURE__ */ import_react.default.createElement(Wrapper, {
82
+ text,
69
83
  textAlign: "center",
70
84
  startPlacementPreference: tooltipStartPlacementPreference
71
- }, void 0, /*#__PURE__*/_jsx2__default["default"]("svg", {
85
+ }, /* @__PURE__ */ import_react.default.createElement("svg", {
72
86
  width: sizeToPx[size],
73
87
  height: sizeToPx[size],
74
- style: {
75
- display: 'block',
76
- margin: 'auto'
77
- }
78
- }, void 0, /*#__PURE__*/_jsx2__default["default"]("rect", {
88
+ style: { display: "block", margin: "auto" }
89
+ }, /* @__PURE__ */ import_react.default.createElement("rect", {
79
90
  width: "100%",
80
91
  height: "100%",
81
92
  fill: "transparent",
82
93
  strokeWidth: sizeToWeight[size],
83
94
  strokeDasharray: "400% 400%",
84
95
  stroke: colorToHex[color]
85
- }, void 0, _animate || (_animate = /*#__PURE__*/_jsx2__default["default"]("animate", {
96
+ }, /* @__PURE__ */ import_react.default.createElement("animate", {
86
97
  attributeName: "stroke-dashoffset",
87
98
  values: "800%;0",
88
99
  keyTimes: "0;1",
89
- dur: "2.5s",
100
+ dur: `${__duration}s`,
90
101
  repeatCount: "indefinite",
91
102
  restart: "always"
92
- })))), text !== '' && showText && /*#__PURE__*/_jsx2__default["default"]("span", {
93
- style: {
94
- color: colorToHex[color],
95
- fontSize: sizeToTextSize[size]
96
- }
97
- }, void 0, text)));
103
+ }))), text !== "" && showText && /* @__PURE__ */ import_react.default.createElement("span", {
104
+ style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }
105
+ }, text)));
98
106
  };
99
- const DSSquareIndicatorWithSchema = reactDesc.describe(DSSquareIndicator);
100
- DSSquareIndicatorWithSchema.propTypes = reactDescPropTypes.SquareIndicatorPropTypes;
101
-
102
- exports.DSSquareIndicator = DSSquareIndicator;
103
- exports.DSSquareIndicatorWithSchema = DSSquareIndicatorWithSchema;
107
+ DSSquareIndicator.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
108
+ const DSSquareIndicatorWithSchema = (0, import_react_desc.describe)(DSSquareIndicator);
109
+ DSSquareIndicatorWithSchema.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
110
+ module.exports = __toCommonJS(DSSquareIndicator_exports);
111
+ //# sourceMappingURL=DSSquareIndicator.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/DSSquareIndicator.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe } from 'react-desc';\nimport { DSSquareIndicatorT, SquareIndicatorPropTypes } from './react-desc-prop-types';\n\nconst sizeToPx = {\n xs: '16px',\n s: '24px',\n m: '32px',\n l: '48px',\n xl: '56px',\n xxl: '64px',\n};\n\nconst sizeToWeight = {\n xs: '3px',\n s: '3px',\n m: '3px',\n l: '4px',\n xl: '5px',\n xxl: '6px',\n};\n\nconst colorToHex = {\n light: '#FFFFFF',\n dark: '#0F364A',\n};\n\nconst sizeToTextSize = {\n xs: '12px',\n s: '12px',\n m: '12px',\n l: '13px',\n xl: '14px',\n xxl: '16px',\n};\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = ({\n size = 'm',\n color = 'dark',\n text = '',\n showText = true,\n withTooltip = false,\n tooltipStartPlacementPreference = 'bottom',\n __duration = 2.5,\n}) => {\n const Wrapper = withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>;\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\">\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg width={sizeToPx[size]} height={sizeToPx[size]} style={{ display: 'block', margin: 'auto' }}>\n <rect\n width=\"100%\"\n height=\"100%\"\n fill=\"transparent\"\n strokeWidth={sizeToWeight[size]}\n strokeDasharray=\"400% 400%\"\n stroke={colorToHex[color]}\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n values=\"800%;0\"\n keyTimes=\"0;1\"\n dur={`${__duration}s`}\n repeatCount=\"indefinite\"\n restart=\"always\"\n />\n </rect>\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes as WeakValidationMap<unknown>;\n\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAC5D,qBAAqB;AACrB,wBAA4B;AAC5B,wBAAyB;AACzB,mCAA6D;AAE7D,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA;AAGR,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,oBAAmE,CAAC;AAAA,EAC/E,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,kCAAkC;AAAA,EAClC,aAAa;AAAA,MACT;AACJ,QAAM,UAAU,cAAc,gCAAc,CAAC,EAAE,eAA2C,wFAAG;AAE7F,SACE,mDAAC,qBAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,KAC7C,mDAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,mDAAC,OAAD;AAAA,IAAK,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,IAAO,OAAO,EAAE,SAAS,SAAS,QAAQ;AAAA,KACrF,mDAAC,QAAD;AAAA,IACE,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,aAAa,aAAa;AAAA,IAC1B,iBAAgB;AAAA,IAChB,QAAQ,WAAW;AAAA,KAEnB,mDAAC,WAAD;AAAA,IACE,eAAc;AAAA,IACd,QAAO;AAAA,IACP,UAAS;AAAA,IACT,KAAK,GAAG;AAAA,IACR,aAAY;AAAA,IACZ,SAAQ;AAAA,QAIb,SAAS,MAAM,YACd,mDAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,WAAW,QAAQ,UAAU,eAAe;AAAA,KAAU;AAAA;AAOtF,kBAAkB,YAAY;AAEvB,MAAM,8BAA8B,gCAAS;AACpD,4BAA4B,YAAY;",
6
+ "names": []
7
+ }
package/cjs/index.js CHANGED
@@ -1,10 +1,36 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var DSSquareIndicator = require('./DSSquareIndicator.js');
6
-
7
-
8
-
9
- exports.DSSquareIndicator = DSSquareIndicator.DSSquareIndicator;
10
- exports.DSSquareIndicatorWithSchema = DSSquareIndicator.DSSquareIndicatorWithSchema;
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var src_exports = {};
29
+ __export(src_exports, {
30
+ DSSquareIndicator: () => import_DSSquareIndicator.DSSquareIndicator,
31
+ DSSquareIndicatorWithSchema: () => import_DSSquareIndicator.DSSquareIndicatorWithSchema
32
+ });
33
+ var React = __toESM(require("react"));
34
+ var import_DSSquareIndicator = require("./DSSquareIndicator");
35
+ module.exports = __toCommonJS(src_exports);
36
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator';\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA+D;",
6
+ "names": []
7
+ }
@@ -1,17 +1,56 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var reactDesc = require('react-desc');
6
-
7
- /* eslint-disable max-lines */
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var react_desc_prop_types_exports = {};
29
+ __export(react_desc_prop_types_exports, {
30
+ SquareIndicatorPropTypes: () => SquareIndicatorPropTypes
31
+ });
32
+ var React = __toESM(require("react"));
33
+ var import_react_desc = require("react-desc");
8
34
  const SquareIndicatorPropTypes = {
9
- size: reactDesc.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
10
- color: reactDesc.PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
11
- text: reactDesc.PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
12
- showText: reactDesc.PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
13
- withTooltip: reactDesc.PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
14
- tooltipStartPlacementPreference: reactDesc.PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preference for the tooltip').defaultValue('center')
35
+ size: import_react_desc.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
36
+ color: import_react_desc.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
37
+ text: import_react_desc.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
38
+ showText: import_react_desc.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
39
+ withTooltip: import_react_desc.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
40
+ tooltipStartPlacementPreference: import_react_desc.PropTypes.oneOf([
41
+ "top-start",
42
+ "top",
43
+ "top-end",
44
+ "right-start",
45
+ "right",
46
+ "right-end",
47
+ "bottom-end",
48
+ "bottom",
49
+ "bottom-start",
50
+ "left-end",
51
+ "left",
52
+ "left-start"
53
+ ]).description("start placement preference for the tooltip").defaultValue("center")
15
54
  };
16
-
17
- exports.SquareIndicatorPropTypes = SquareIndicatorPropTypes;
55
+ module.exports = __toCommonJS(react_desc_prop_types_exports);
56
+ //# sourceMappingURL=react-desc-prop-types.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes } from 'react-desc';\n\nexport declare namespace DSSquareIndicatorT {\n interface Props {\n size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n color?: 'light' | 'dark';\n text?: string;\n showText?: boolean;\n withTooltip: boolean;\n tooltipStartPlacementPreference?:\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n __duration: number;\n }\n}\n\nexport const SquareIndicatorPropTypes = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n withTooltip: PropTypes.bool\n .description('Whether to include a tooltip that shows the optional text on hover')\n .defaultValue(false),\n tooltipStartPlacementPreference: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preference for the tooltip')\n .defaultValue('center'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAA0B;AA0BnB,MAAM,2BAA2B;AAAA,EACtC,MAAM,4BAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,4BAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,4BAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,4BAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,4BAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,4BAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,YAAY,8CACZ,aAAa;AAAA;",
6
+ "names": []
7
+ }
@@ -1,94 +1,82 @@
1
- import _jsx2 from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { Grid } from '@elliemae/ds-grid';
4
- import { DSTooltipV3 } from '@elliemae/ds-tooltip';
5
- import { describe } from 'react-desc';
6
- import { SquareIndicatorPropTypes } from './react-desc-prop-types.js';
7
- import { jsx, Fragment } from 'react/jsx-runtime';
8
-
9
- var _animate;
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import { Grid } from "@elliemae/ds-grid";
4
+ import { DSTooltipV3 } from "@elliemae/ds-tooltip";
5
+ import { describe } from "react-desc";
6
+ import { SquareIndicatorPropTypes } from "./react-desc-prop-types";
10
7
  const sizeToPx = {
11
- xs: '16px',
12
- s: '24px',
13
- m: '32px',
14
- l: '48px',
15
- xl: '56px',
16
- xxl: '64px'
8
+ xs: "16px",
9
+ s: "24px",
10
+ m: "32px",
11
+ l: "48px",
12
+ xl: "56px",
13
+ xxl: "64px"
17
14
  };
18
15
  const sizeToWeight = {
19
- xs: '3px',
20
- s: '3px',
21
- m: '3px',
22
- l: '4px',
23
- xl: '5px',
24
- xxl: '6px'
16
+ xs: "3px",
17
+ s: "3px",
18
+ m: "3px",
19
+ l: "4px",
20
+ xl: "5px",
21
+ xxl: "6px"
25
22
  };
26
23
  const colorToHex = {
27
- light: '#FFFFFF',
28
- dark: '#0F364A'
24
+ light: "#FFFFFF",
25
+ dark: "#0F364A"
29
26
  };
30
27
  const sizeToTextSize = {
31
- xs: '12px',
32
- s: '12px',
33
- m: '12px',
34
- l: '13px',
35
- xl: '14px',
36
- xxl: '16px'
28
+ xs: "12px",
29
+ s: "12px",
30
+ m: "12px",
31
+ l: "13px",
32
+ xl: "14px",
33
+ xxl: "16px"
37
34
  };
38
- const DSSquareIndicator = _ref => {
39
- let {
40
- size = 'm',
41
- color = 'dark',
42
- text = '',
43
- showText = true,
44
- withTooltip = false,
45
- tooltipStartPlacementPreference = 'bottom'
46
- } = _ref;
47
- const Wrapper = withTooltip ? DSTooltipV3 : _ref2 => {
48
- let {
49
- children
50
- } = _ref2;
51
- return /*#__PURE__*/jsx(Fragment, {
52
- children: children
53
- });
54
- };
55
- return /*#__PURE__*/_jsx2(Grid, {
35
+ const DSSquareIndicator = ({
36
+ size = "m",
37
+ color = "dark",
38
+ text = "",
39
+ showText = true,
40
+ withTooltip = false,
41
+ tooltipStartPlacementPreference = "bottom",
42
+ __duration = 2.5
43
+ }) => {
44
+ const Wrapper = withTooltip ? DSTooltipV3 : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
45
+ return /* @__PURE__ */ React2.createElement(Grid, {
56
46
  gutter: "xs",
57
47
  justifyContent: "center",
58
48
  role: "status"
59
- }, void 0, /*#__PURE__*/_jsx2(Wrapper, {
60
- text: text,
49
+ }, /* @__PURE__ */ React2.createElement(Wrapper, {
50
+ text,
61
51
  textAlign: "center",
62
52
  startPlacementPreference: tooltipStartPlacementPreference
63
- }, void 0, /*#__PURE__*/_jsx2("svg", {
53
+ }, /* @__PURE__ */ React2.createElement("svg", {
64
54
  width: sizeToPx[size],
65
55
  height: sizeToPx[size],
66
- style: {
67
- display: 'block',
68
- margin: 'auto'
69
- }
70
- }, void 0, /*#__PURE__*/_jsx2("rect", {
56
+ style: { display: "block", margin: "auto" }
57
+ }, /* @__PURE__ */ React2.createElement("rect", {
71
58
  width: "100%",
72
59
  height: "100%",
73
60
  fill: "transparent",
74
61
  strokeWidth: sizeToWeight[size],
75
62
  strokeDasharray: "400% 400%",
76
63
  stroke: colorToHex[color]
77
- }, void 0, _animate || (_animate = /*#__PURE__*/_jsx2("animate", {
64
+ }, /* @__PURE__ */ React2.createElement("animate", {
78
65
  attributeName: "stroke-dashoffset",
79
66
  values: "800%;0",
80
67
  keyTimes: "0;1",
81
- dur: "2.5s",
68
+ dur: `${__duration}s`,
82
69
  repeatCount: "indefinite",
83
70
  restart: "always"
84
- })))), text !== '' && showText && /*#__PURE__*/_jsx2("span", {
85
- style: {
86
- color: colorToHex[color],
87
- fontSize: sizeToTextSize[size]
88
- }
89
- }, void 0, text)));
71
+ }))), text !== "" && showText && /* @__PURE__ */ React2.createElement("span", {
72
+ style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }
73
+ }, text)));
90
74
  };
75
+ DSSquareIndicator.propTypes = SquareIndicatorPropTypes;
91
76
  const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);
92
77
  DSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;
93
-
94
- export { DSSquareIndicator, DSSquareIndicatorWithSchema };
78
+ export {
79
+ DSSquareIndicator,
80
+ DSSquareIndicatorWithSchema
81
+ };
82
+ //# sourceMappingURL=DSSquareIndicator.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSquareIndicator.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe } from 'react-desc';\nimport { DSSquareIndicatorT, SquareIndicatorPropTypes } from './react-desc-prop-types';\n\nconst sizeToPx = {\n xs: '16px',\n s: '24px',\n m: '32px',\n l: '48px',\n xl: '56px',\n xxl: '64px',\n};\n\nconst sizeToWeight = {\n xs: '3px',\n s: '3px',\n m: '3px',\n l: '4px',\n xl: '5px',\n xxl: '6px',\n};\n\nconst colorToHex = {\n light: '#FFFFFF',\n dark: '#0F364A',\n};\n\nconst sizeToTextSize = {\n xs: '12px',\n s: '12px',\n m: '12px',\n l: '13px',\n xl: '14px',\n xxl: '16px',\n};\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = ({\n size = 'm',\n color = 'dark',\n text = '',\n showText = true,\n withTooltip = false,\n tooltipStartPlacementPreference = 'bottom',\n __duration = 2.5,\n}) => {\n const Wrapper = withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>;\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\">\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg width={sizeToPx[size]} height={sizeToPx[size]} style={{ display: 'block', margin: 'auto' }}>\n <rect\n width=\"100%\"\n height=\"100%\"\n fill=\"transparent\"\n strokeWidth={sizeToWeight[size]}\n strokeDasharray=\"400% 400%\"\n stroke={colorToHex[color]}\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n values=\"800%;0\"\n keyTimes=\"0;1\"\n dur={`${__duration}s`}\n repeatCount=\"indefinite\"\n restart=\"always\"\n />\n </rect>\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes as WeakValidationMap<unknown>;\n\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA;AAGR,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,oBAAmE,CAAC;AAAA,EAC/E,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,kCAAkC;AAAA,EAClC,aAAa;AAAA,MACT;AACJ,QAAM,UAAU,cAAc,cAAc,CAAC,EAAE,eAA2C,4DAAG;AAE7F,SACE,qCAAC,MAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,KAC7C,qCAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC,OAAD;AAAA,IAAK,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,IAAO,OAAO,EAAE,SAAS,SAAS,QAAQ;AAAA,KACrF,qCAAC,QAAD;AAAA,IACE,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,aAAa,aAAa;AAAA,IAC1B,iBAAgB;AAAA,IAChB,QAAQ,WAAW;AAAA,KAEnB,qCAAC,WAAD;AAAA,IACE,eAAc;AAAA,IACd,QAAO;AAAA,IACP,UAAS;AAAA,IACT,KAAK,GAAG;AAAA,IACR,aAAY;AAAA,IACZ,SAAQ;AAAA,QAIb,SAAS,MAAM,YACd,qCAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,WAAW,QAAQ,UAAU,eAAe;AAAA,KAAU;AAAA;AAOtF,kBAAkB,YAAY;AAEvB,MAAM,8BAA8B,SAAS;AACpD,4BAA4B,YAAY;",
6
+ "names": []
7
+ }
package/esm/index.js CHANGED
@@ -1 +1,7 @@
1
- export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';
1
+ import * as React from "react";
2
+ import { DSSquareIndicator, DSSquareIndicatorWithSchema } from "./DSSquareIndicator";
3
+ export {
4
+ DSSquareIndicator,
5
+ DSSquareIndicatorWithSchema
6
+ };
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator';\n"],
5
+ "mappings": "AAAA;ACAA;",
6
+ "names": []
7
+ }
@@ -1,13 +1,27 @@
1
- import { PropTypes } from 'react-desc';
2
-
3
- /* eslint-disable max-lines */
1
+ import * as React from "react";
2
+ import { PropTypes } from "react-desc";
4
3
  const SquareIndicatorPropTypes = {
5
- size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
6
- color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
7
- text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
8
- showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
9
- withTooltip: PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
10
- tooltipStartPlacementPreference: PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preference for the tooltip').defaultValue('center')
4
+ size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
5
+ color: PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
6
+ text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
7
+ showText: PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
8
+ withTooltip: PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
9
+ tooltipStartPlacementPreference: PropTypes.oneOf([
10
+ "top-start",
11
+ "top",
12
+ "top-end",
13
+ "right-start",
14
+ "right",
15
+ "right-end",
16
+ "bottom-end",
17
+ "bottom",
18
+ "bottom-start",
19
+ "left-end",
20
+ "left",
21
+ "left-start"
22
+ ]).description("start placement preference for the tooltip").defaultValue("center")
11
23
  };
12
-
13
- export { SquareIndicatorPropTypes };
24
+ export {
25
+ SquareIndicatorPropTypes
26
+ };
27
+ //# sourceMappingURL=react-desc-prop-types.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes } from 'react-desc';\n\nexport declare namespace DSSquareIndicatorT {\n interface Props {\n size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n color?: 'light' | 'dark';\n text?: string;\n showText?: boolean;\n withTooltip: boolean;\n tooltipStartPlacementPreference?:\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n __duration: number;\n }\n}\n\nexport const SquareIndicatorPropTypes = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n withTooltip: PropTypes.bool\n .description('Whether to include a tooltip that shows the optional text on hover')\n .defaultValue(false),\n tooltipStartPlacementPreference: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preference for the tooltip')\n .defaultValue('center'),\n};\n"],
5
+ "mappings": "AAAA;ACCA;AA0BO,MAAM,2BAA2B;AAAA,EACtC,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,UAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,UAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,UAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,UAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,YAAY,8CACZ,aAAa;AAAA;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-square-indicator",
3
- "version": "2.2.0-next.5",
3
+ "version": "2.3.0-alpha.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
6
6
  "module": "./esm/index.js",
@@ -40,7 +40,7 @@
40
40
  "build": "node ../../scripts/build/build.js"
41
41
  },
42
42
  "dependencies": {
43
- "@elliemae/ds-grid": "2.2.0-next.5",
43
+ "@elliemae/ds-grid": "2.3.0-alpha.3",
44
44
  "react-desc": "~4.1.3"
45
45
  },
46
46
  "peerDependencies": {
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import { DSSquareIndicatorT } from './react-desc-prop-types';
4
4
  export declare const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props>;
5
5
  export declare const DSSquareIndicatorWithSchema: {
6
- (props?: React.PropsWithChildren<DSSquareIndicatorT.Props> | undefined): JSX.Element;
6
+ (props?: unknown): JSX.Element;
7
7
  propTypes: unknown;
8
8
  toTypescript: () => import("react-desc").TypescriptSchema;
9
9
  };
package/types/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from './DSSquareIndicator';
1
+ export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator';
@@ -7,6 +7,7 @@ export declare namespace DSSquareIndicatorT {
7
7
  showText?: boolean;
8
8
  withTooltip: boolean;
9
9
  tooltipStartPlacementPreference?: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
10
+ __duration: number;
10
11
  }
11
12
  }
12
13
  export declare const SquareIndicatorPropTypes: {