@elliemae/ds-square-indicator 3.0.0-alpha.0 → 3.0.0-next.10
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.
- package/dist/cjs/DSSquareIndicator.js +123 -59
- package/dist/cjs/DSSquareIndicator.js.map +2 -2
- package/dist/cjs/constants.js +65 -0
- package/dist/cjs/constants.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +36 -9
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +124 -0
- package/dist/cjs/styled.js.map +7 -0
- package/dist/esm/DSSquareIndicator.js +123 -57
- package/dist/esm/DSSquareIndicator.js.map +2 -2
- package/dist/esm/constants.js +36 -0
- package/dist/esm/constants.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +32 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +95 -0
- package/dist/esm/styled.js.map +7 -0
- package/package.json +5 -3
- package/dist/types/DSSquareIndicator.d.ts +0 -9
- package/dist/types/index.d.ts +0 -1
- package/dist/types/react-desc-prop-types.d.ts +0 -32
|
@@ -2,8 +2,22 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
22
|
var __export = (target, all) => {
|
|
9
23
|
for (var name in all)
|
|
@@ -34,78 +48,128 @@ var React = __toESM(require("react"));
|
|
|
34
48
|
var import_react = __toESM(require("react"));
|
|
35
49
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
36
50
|
var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
|
37
|
-
var
|
|
51
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
52
|
+
var import_uid = require("uid");
|
|
38
53
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
m: "3px",
|
|
51
|
-
l: "4px",
|
|
52
|
-
xl: "5px",
|
|
53
|
-
xxl: "6px"
|
|
54
|
-
};
|
|
55
|
-
const colorToHex = {
|
|
56
|
-
light: "#FFFFFF",
|
|
57
|
-
dark: "#0F364A"
|
|
58
|
-
};
|
|
59
|
-
const sizeToTextSize = {
|
|
60
|
-
xs: "12px",
|
|
61
|
-
s: "12px",
|
|
62
|
-
m: "12px",
|
|
63
|
-
l: "13px",
|
|
64
|
-
xl: "14px",
|
|
65
|
-
xxl: "16px"
|
|
66
|
-
};
|
|
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, {
|
|
54
|
+
var import_styled = require("./styled");
|
|
55
|
+
var import_constants = require("./constants");
|
|
56
|
+
const DSSquareIndicator = (props) => {
|
|
57
|
+
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
58
|
+
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
59
|
+
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;
|
|
60
|
+
const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children), [withTooltip]);
|
|
61
|
+
const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
|
|
62
|
+
const paddedCoordinate = (0, import_react.useMemo)(() => `calc(100% - ${import_constants.sizeToWeight[size]})`, [size]);
|
|
63
|
+
const hexColor = (0, import_react.useMemo)(() => import_constants.colorToHex[color], [color]);
|
|
64
|
+
return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, __spreadValues({
|
|
78
65
|
gutter: "xs",
|
|
79
66
|
justifyContent: "center",
|
|
80
67
|
role: "status"
|
|
81
|
-
}, /* @__PURE__ */ import_react.default.createElement(Wrapper, {
|
|
68
|
+
}, globalAttributes), /* @__PURE__ */ import_react.default.createElement(Wrapper, {
|
|
82
69
|
text,
|
|
83
70
|
textAlign: "center",
|
|
84
71
|
startPlacementPreference: tooltipStartPlacementPreference
|
|
85
72
|
}, /* @__PURE__ */ import_react.default.createElement("svg", {
|
|
86
|
-
width: sizeToPx[size],
|
|
87
|
-
height: sizeToPx[size],
|
|
88
|
-
style: {
|
|
73
|
+
width: import_constants.sizeToPx[size],
|
|
74
|
+
height: import_constants.sizeToPx[size],
|
|
75
|
+
style: {
|
|
76
|
+
display: "block",
|
|
77
|
+
margin: "auto"
|
|
78
|
+
}
|
|
79
|
+
}, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", {
|
|
80
|
+
id: `${uniqueId}-lg1`,
|
|
81
|
+
x1: "0",
|
|
82
|
+
y1: "0",
|
|
83
|
+
x2: "0",
|
|
84
|
+
y2: "100%"
|
|
85
|
+
}, /* @__PURE__ */ import_react.default.createElement("stop", {
|
|
86
|
+
offset: "20%",
|
|
87
|
+
stopColor: `${hexColor}FF`
|
|
88
|
+
}), /* @__PURE__ */ import_react.default.createElement("stop", {
|
|
89
|
+
offset: "80%",
|
|
90
|
+
stopColor: `${hexColor}00`
|
|
91
|
+
})), /* @__PURE__ */ import_react.default.createElement("linearGradient", {
|
|
92
|
+
id: `${uniqueId}-lg2`,
|
|
93
|
+
x1: "0",
|
|
94
|
+
y1: "0",
|
|
95
|
+
x2: "100%",
|
|
96
|
+
y2: "0"
|
|
97
|
+
}, /* @__PURE__ */ import_react.default.createElement("stop", {
|
|
98
|
+
offset: "10%",
|
|
99
|
+
stopColor: `${hexColor}00`
|
|
100
|
+
}), /* @__PURE__ */ import_react.default.createElement("stop", {
|
|
101
|
+
offset: "50%",
|
|
102
|
+
stopColor: `${hexColor}FF`
|
|
103
|
+
})), /* @__PURE__ */ import_react.default.createElement("linearGradient", {
|
|
104
|
+
id: `${uniqueId}-lg3`,
|
|
105
|
+
x1: "0",
|
|
106
|
+
y1: "0",
|
|
107
|
+
x2: "0",
|
|
108
|
+
y2: "100%"
|
|
109
|
+
}, /* @__PURE__ */ import_react.default.createElement("stop", {
|
|
110
|
+
offset: "10%",
|
|
111
|
+
stopColor: `${hexColor}00`
|
|
112
|
+
}), /* @__PURE__ */ import_react.default.createElement("stop", {
|
|
113
|
+
offset: "50%",
|
|
114
|
+
stopColor: `${hexColor}FF`
|
|
115
|
+
})), /* @__PURE__ */ import_react.default.createElement("linearGradient", {
|
|
116
|
+
id: `${uniqueId}-lg4`,
|
|
117
|
+
x1: "0",
|
|
118
|
+
y1: "0",
|
|
119
|
+
x2: "100%",
|
|
120
|
+
y2: "0"
|
|
121
|
+
}, /* @__PURE__ */ import_react.default.createElement("stop", {
|
|
122
|
+
offset: "50%",
|
|
123
|
+
stopColor: `${hexColor}FF`
|
|
124
|
+
}), /* @__PURE__ */ import_react.default.createElement("stop", {
|
|
125
|
+
offset: "90%",
|
|
126
|
+
stopColor: `${hexColor}00`
|
|
127
|
+
})), /* @__PURE__ */ import_react.default.createElement("clipPath", {
|
|
128
|
+
id: `${uniqueId}-lcp1`
|
|
89
129
|
}, /* @__PURE__ */ import_react.default.createElement("rect", {
|
|
130
|
+
x: import_constants.sizeToWeight[size],
|
|
131
|
+
y: 0,
|
|
90
132
|
width: "100%",
|
|
91
|
-
height:
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
133
|
+
height: import_constants.sizeToWeight[size]
|
|
134
|
+
})), /* @__PURE__ */ import_react.default.createElement("clipPath", {
|
|
135
|
+
id: `${uniqueId}-lcp2`
|
|
136
|
+
}, /* @__PURE__ */ import_react.default.createElement("rect", {
|
|
137
|
+
x: paddedCoordinate,
|
|
138
|
+
y: import_constants.sizeToWeight[size],
|
|
139
|
+
width: import_constants.sizeToWeight[size],
|
|
140
|
+
height: "100%"
|
|
141
|
+
})), /* @__PURE__ */ import_react.default.createElement("clipPath", {
|
|
142
|
+
id: `${uniqueId}-lcp3`
|
|
143
|
+
}, /* @__PURE__ */ import_react.default.createElement("rect", {
|
|
144
|
+
x: 0,
|
|
145
|
+
y: paddedCoordinate,
|
|
146
|
+
width: paddedCoordinate,
|
|
147
|
+
height: import_constants.sizeToWeight[size]
|
|
148
|
+
}))), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLineLeft, {
|
|
149
|
+
size,
|
|
150
|
+
__duration,
|
|
151
|
+
fill: `url(#${uniqueId}-lg1)`
|
|
152
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLineTop, {
|
|
153
|
+
size,
|
|
154
|
+
__duration,
|
|
155
|
+
fill: `url(#${uniqueId}-lg2)`,
|
|
156
|
+
clipPath: `url(#${uniqueId}-lcp1)`
|
|
157
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLineRight, {
|
|
158
|
+
size,
|
|
159
|
+
__duration,
|
|
160
|
+
fill: `url(#${uniqueId}-lg3)`,
|
|
161
|
+
clipPath: `url(#${uniqueId}-lcp2)`
|
|
162
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLineBottom, {
|
|
163
|
+
size,
|
|
164
|
+
__duration,
|
|
165
|
+
fill: `url(#${uniqueId}-lg4)`,
|
|
166
|
+
clipPath: `url(#${uniqueId}-lcp3)`
|
|
167
|
+
})), text !== "" && showText && /* @__PURE__ */ import_react.default.createElement("span", {
|
|
168
|
+
style: { color: import_constants.colorToHex[color], fontSize: import_constants.sizeToTextSize[size] }
|
|
105
169
|
}, text)));
|
|
106
170
|
};
|
|
107
171
|
DSSquareIndicator.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
|
|
108
|
-
const DSSquareIndicatorWithSchema = (0,
|
|
172
|
+
const DSSquareIndicatorWithSchema = (0, import_ds_props_helpers.describe)(DSSquareIndicator);
|
|
109
173
|
DSSquareIndicatorWithSchema.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
|
|
110
174
|
module.exports = __toCommonJS(DSSquareIndicator_exports);
|
|
111
175
|
//# sourceMappingURL=DSSquareIndicator.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSSquareIndicator.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { PropsWithChildren, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { defaultProps, DSSquareIndicatorT, SquareIndicatorPropTypes } from './react-desc-prop-types';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(\n () => (withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>),\n [withTooltip],\n );\n\n const uniqueId = useMemo(() => uid(16), []);\n const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} __duration={__duration} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop\n size={size}\n __duration={__duration}\n fill={`url(#${uniqueId}-lg2)`}\n clipPath={`url(#${uniqueId}-lcp1)`}\n />\n <StyledLineRight\n size={size}\n __duration={__duration}\n fill={`url(#${uniqueId}-lg3)`}\n clipPath={`url(#${uniqueId}-lcp2)`}\n />\n <StyledLineBottom\n size={size}\n __duration={__duration}\n fill={`url(#${uniqueId}-lg4)`}\n clipPath={`url(#${uniqueId}-lcp3)`}\n />\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;\n\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,65 @@
|
|
|
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 constants_exports = {};
|
|
29
|
+
__export(constants_exports, {
|
|
30
|
+
colorToHex: () => colorToHex,
|
|
31
|
+
sizeToPx: () => sizeToPx,
|
|
32
|
+
sizeToTextSize: () => sizeToTextSize,
|
|
33
|
+
sizeToWeight: () => sizeToWeight
|
|
34
|
+
});
|
|
35
|
+
var React = __toESM(require("react"));
|
|
36
|
+
const sizeToPx = {
|
|
37
|
+
xs: "16px",
|
|
38
|
+
s: "24px",
|
|
39
|
+
m: "32px",
|
|
40
|
+
l: "48px",
|
|
41
|
+
xl: "56px",
|
|
42
|
+
xxl: "64px"
|
|
43
|
+
};
|
|
44
|
+
const sizeToWeight = {
|
|
45
|
+
xs: "3px",
|
|
46
|
+
s: "3px",
|
|
47
|
+
m: "3px",
|
|
48
|
+
l: "4px",
|
|
49
|
+
xl: "5px",
|
|
50
|
+
xxl: "6px"
|
|
51
|
+
};
|
|
52
|
+
const colorToHex = {
|
|
53
|
+
light: "#FFFFFF",
|
|
54
|
+
dark: "#0F364A"
|
|
55
|
+
};
|
|
56
|
+
const sizeToTextSize = {
|
|
57
|
+
xs: "12px",
|
|
58
|
+
s: "12px",
|
|
59
|
+
m: "12px",
|
|
60
|
+
l: "13px",
|
|
61
|
+
xl: "14px",
|
|
62
|
+
xxl: "16px"
|
|
63
|
+
};
|
|
64
|
+
module.exports = __toCommonJS(constants_exports);
|
|
65
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/constants.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export const sizeToPx = {\n xs: '16px',\n s: '24px',\n m: '32px',\n l: '48px',\n xl: '56px',\n xxl: '64px',\n};\n\nexport const sizeToWeight = {\n xs: '3px',\n s: '3px',\n m: '3px',\n l: '4px',\n xl: '5px',\n xxl: '6px',\n};\n\nexport const colorToHex = {\n light: '#FFFFFF',\n dark: '#0F364A',\n};\n\nexport const sizeToTextSize = {\n xs: '12px',\n s: '12px',\n m: '12px',\n l: '13px',\n xl: '14px',\n xxl: '16px',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,9 +1,26 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
25
|
var __export = (target, all) => {
|
|
9
26
|
for (var name in all)
|
|
@@ -27,17 +44,18 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
|
27
44
|
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
45
|
var react_desc_prop_types_exports = {};
|
|
29
46
|
__export(react_desc_prop_types_exports, {
|
|
30
|
-
SquareIndicatorPropTypes: () => SquareIndicatorPropTypes
|
|
47
|
+
SquareIndicatorPropTypes: () => SquareIndicatorPropTypes,
|
|
48
|
+
defaultProps: () => defaultProps
|
|
31
49
|
});
|
|
32
50
|
var React = __toESM(require("react"));
|
|
33
|
-
var
|
|
34
|
-
const SquareIndicatorPropTypes = {
|
|
35
|
-
size:
|
|
36
|
-
color:
|
|
37
|
-
text:
|
|
38
|
-
showText:
|
|
39
|
-
withTooltip:
|
|
40
|
-
tooltipStartPlacementPreference:
|
|
51
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
52
|
+
const SquareIndicatorPropTypes = __spreadProps(__spreadValues({}, import_ds_props_helpers.globalAttributesPropTypes), {
|
|
53
|
+
size: import_ds_props_helpers.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
|
|
54
|
+
color: import_ds_props_helpers.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
|
|
55
|
+
text: import_ds_props_helpers.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
|
|
56
|
+
showText: import_ds_props_helpers.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
|
|
57
|
+
withTooltip: import_ds_props_helpers.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
|
|
58
|
+
tooltipStartPlacementPreference: import_ds_props_helpers.PropTypes.oneOf([
|
|
41
59
|
"top-start",
|
|
42
60
|
"top",
|
|
43
61
|
"top-end",
|
|
@@ -51,6 +69,15 @@ const SquareIndicatorPropTypes = {
|
|
|
51
69
|
"left",
|
|
52
70
|
"left-start"
|
|
53
71
|
]).description("start placement preference for the tooltip").defaultValue("center")
|
|
72
|
+
});
|
|
73
|
+
const defaultProps = {
|
|
74
|
+
size: "m",
|
|
75
|
+
color: "dark",
|
|
76
|
+
text: "",
|
|
77
|
+
showText: true,
|
|
78
|
+
withTooltip: false,
|
|
79
|
+
tooltipStartPlacementPreference: "bottom",
|
|
80
|
+
__duration: 2.5
|
|
54
81
|
};
|
|
55
82
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
56
83
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes } from '
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { WeakValidationMap } from 'react';\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 ...globalAttributesPropTypes,\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} as WeakValidationMap<unknown>;\n\nexport const defaultProps: 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAqD;AA2B9C,MAAM,2BAA2B,iCACnC,oDADmC;AAAA,EAEtC,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,kCAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,kCAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,kCAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,kCAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,kCAAU,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;AAGX,MAAM,eAAyC;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,124 @@
|
|
|
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 styled_exports = {};
|
|
29
|
+
__export(styled_exports, {
|
|
30
|
+
StyledLineBottom: () => StyledLineBottom,
|
|
31
|
+
StyledLineLeft: () => StyledLineLeft,
|
|
32
|
+
StyledLineRight: () => StyledLineRight,
|
|
33
|
+
StyledLineTop: () => StyledLineTop
|
|
34
|
+
});
|
|
35
|
+
var React = __toESM(require("react"));
|
|
36
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
37
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
+
var import_constants = require("./constants");
|
|
39
|
+
const lineLeftAnimation = import_ds_system.kfrm`
|
|
40
|
+
0% {
|
|
41
|
+
y: 100%;
|
|
42
|
+
height: 100%;
|
|
43
|
+
}
|
|
44
|
+
12.5%, 50% {
|
|
45
|
+
y: 0;
|
|
46
|
+
height: 100%;
|
|
47
|
+
}
|
|
48
|
+
62.5%, 100% {
|
|
49
|
+
y: -100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
}
|
|
52
|
+
`;
|
|
53
|
+
const lineTopAnimation = import_ds_system.kfrm`
|
|
54
|
+
0% {
|
|
55
|
+
x: -100%;
|
|
56
|
+
width: 0%;
|
|
57
|
+
}
|
|
58
|
+
25%, 50% {
|
|
59
|
+
x: -100%;
|
|
60
|
+
width: 200%;
|
|
61
|
+
}
|
|
62
|
+
75%, 100% {
|
|
63
|
+
x: 100%;
|
|
64
|
+
width: 200%;
|
|
65
|
+
}
|
|
66
|
+
`;
|
|
67
|
+
const lineRightAnimation = import_ds_system.kfrm`
|
|
68
|
+
0%, 12.5% {
|
|
69
|
+
y: -100%;
|
|
70
|
+
height: 0%;
|
|
71
|
+
}
|
|
72
|
+
37.5%, 62.5% {
|
|
73
|
+
y: -100%;
|
|
74
|
+
height: 200%;
|
|
75
|
+
}
|
|
76
|
+
87.5%, 100% {
|
|
77
|
+
y: 100%;
|
|
78
|
+
height: 200%;
|
|
79
|
+
}
|
|
80
|
+
`;
|
|
81
|
+
const lineBottomAnimation = import_ds_system.kfrm`
|
|
82
|
+
0%, 25% {
|
|
83
|
+
x: 200%;
|
|
84
|
+
width: 200%;
|
|
85
|
+
}
|
|
86
|
+
50%, 75% {
|
|
87
|
+
x: 0%;
|
|
88
|
+
width: 200%;
|
|
89
|
+
}
|
|
90
|
+
100% {
|
|
91
|
+
x: -200%;
|
|
92
|
+
width: 200%;
|
|
93
|
+
}
|
|
94
|
+
`;
|
|
95
|
+
const StyledLineLeft = import_styled_components.default.rect`
|
|
96
|
+
x: 0;
|
|
97
|
+
y: 0%;
|
|
98
|
+
width: ${({ size }) => import_constants.sizeToWeight[size]};
|
|
99
|
+
height: 100%;
|
|
100
|
+
animation: ${lineLeftAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
|
|
101
|
+
`;
|
|
102
|
+
const StyledLineTop = import_styled_components.default.rect`
|
|
103
|
+
x: -100%;
|
|
104
|
+
y: 0;
|
|
105
|
+
width: 200%;
|
|
106
|
+
height: ${({ size }) => import_constants.sizeToWeight[size]};
|
|
107
|
+
animation: ${lineTopAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
|
|
108
|
+
`;
|
|
109
|
+
const StyledLineRight = import_styled_components.default.rect`
|
|
110
|
+
x: calc(100% - ${({ size }) => import_constants.sizeToWeight[size]});
|
|
111
|
+
y: -100%;
|
|
112
|
+
width: ${({ size }) => import_constants.sizeToWeight[size]};
|
|
113
|
+
height: 200%;
|
|
114
|
+
animation: ${lineRightAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
|
|
115
|
+
`;
|
|
116
|
+
const StyledLineBottom = import_styled_components.default.rect`
|
|
117
|
+
x: 0%;
|
|
118
|
+
y: calc(100% - ${({ size }) => import_constants.sizeToWeight[size]});
|
|
119
|
+
width: 200%;
|
|
120
|
+
height: ${({ size }) => import_constants.sizeToWeight[size]};
|
|
121
|
+
animation: ${lineBottomAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
|
|
122
|
+
`;
|
|
123
|
+
module.exports = __toCommonJS(styled_exports);
|
|
124
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\nimport { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { sizeToWeight } from './constants';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n __duration: number;\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAAqB;AAErB,uBAA6B;AAO7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe1B,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerB,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,WAAW,8BAAa;AAAA;AAAA,eAEvB,qBAAqB,CAAC,EAAE,iBAAiB;AAAA;AAGjD,MAAM,gBAAgB,iCAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,WAAW,8BAAa;AAAA,eACxB,oBAAoB,CAAC,EAAE,iBAAiB;AAAA;AAGhD,MAAM,kBAAkB,iCAAO;AAAA,mBACnB,CAAC,EAAE,WAAW,8BAAa;AAAA;AAAA,WAEnC,CAAC,EAAE,WAAW,8BAAa;AAAA;AAAA,eAEvB,sBAAsB,CAAC,EAAE,iBAAiB;AAAA;AAGlD,MAAM,mBAAmB,iCAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,WAAW,8BAAa;AAAA;AAAA,YAElC,CAAC,EAAE,WAAW,8BAAa;AAAA,eACxB,uBAAuB,CAAC,EAAE,iBAAiB;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,74 +1,140 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
1
17
|
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
18
|
+
import React2, { useMemo } from "react";
|
|
3
19
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
20
|
import { DSTooltipV3 } from "@elliemae/ds-tooltip";
|
|
5
|
-
import { describe } from "
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
l: "4px",
|
|
20
|
-
xl: "5px",
|
|
21
|
-
xxl: "6px"
|
|
22
|
-
};
|
|
23
|
-
const colorToHex = {
|
|
24
|
-
light: "#FFFFFF",
|
|
25
|
-
dark: "#0F364A"
|
|
26
|
-
};
|
|
27
|
-
const sizeToTextSize = {
|
|
28
|
-
xs: "12px",
|
|
29
|
-
s: "12px",
|
|
30
|
-
m: "12px",
|
|
31
|
-
l: "13px",
|
|
32
|
-
xl: "14px",
|
|
33
|
-
xxl: "16px"
|
|
34
|
-
};
|
|
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, {
|
|
21
|
+
import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
22
|
+
import { uid } from "uid";
|
|
23
|
+
import { defaultProps, SquareIndicatorPropTypes } from "./react-desc-prop-types";
|
|
24
|
+
import { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from "./styled";
|
|
25
|
+
import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants";
|
|
26
|
+
const DSSquareIndicator = (props) => {
|
|
27
|
+
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
28
|
+
const globalAttributes = useGetGlobalAttributes(propsWithDefault);
|
|
29
|
+
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;
|
|
30
|
+
const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children), [withTooltip]);
|
|
31
|
+
const uniqueId = useMemo(() => uid(16), []);
|
|
32
|
+
const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);
|
|
33
|
+
const hexColor = useMemo(() => colorToHex[color], [color]);
|
|
34
|
+
return /* @__PURE__ */ React2.createElement(Grid, __spreadValues({
|
|
46
35
|
gutter: "xs",
|
|
47
36
|
justifyContent: "center",
|
|
48
37
|
role: "status"
|
|
49
|
-
}, /* @__PURE__ */ React2.createElement(Wrapper, {
|
|
38
|
+
}, globalAttributes), /* @__PURE__ */ React2.createElement(Wrapper, {
|
|
50
39
|
text,
|
|
51
40
|
textAlign: "center",
|
|
52
41
|
startPlacementPreference: tooltipStartPlacementPreference
|
|
53
42
|
}, /* @__PURE__ */ React2.createElement("svg", {
|
|
54
43
|
width: sizeToPx[size],
|
|
55
44
|
height: sizeToPx[size],
|
|
56
|
-
style: {
|
|
45
|
+
style: {
|
|
46
|
+
display: "block",
|
|
47
|
+
margin: "auto"
|
|
48
|
+
}
|
|
49
|
+
}, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("linearGradient", {
|
|
50
|
+
id: `${uniqueId}-lg1`,
|
|
51
|
+
x1: "0",
|
|
52
|
+
y1: "0",
|
|
53
|
+
x2: "0",
|
|
54
|
+
y2: "100%"
|
|
55
|
+
}, /* @__PURE__ */ React2.createElement("stop", {
|
|
56
|
+
offset: "20%",
|
|
57
|
+
stopColor: `${hexColor}FF`
|
|
58
|
+
}), /* @__PURE__ */ React2.createElement("stop", {
|
|
59
|
+
offset: "80%",
|
|
60
|
+
stopColor: `${hexColor}00`
|
|
61
|
+
})), /* @__PURE__ */ React2.createElement("linearGradient", {
|
|
62
|
+
id: `${uniqueId}-lg2`,
|
|
63
|
+
x1: "0",
|
|
64
|
+
y1: "0",
|
|
65
|
+
x2: "100%",
|
|
66
|
+
y2: "0"
|
|
67
|
+
}, /* @__PURE__ */ React2.createElement("stop", {
|
|
68
|
+
offset: "10%",
|
|
69
|
+
stopColor: `${hexColor}00`
|
|
70
|
+
}), /* @__PURE__ */ React2.createElement("stop", {
|
|
71
|
+
offset: "50%",
|
|
72
|
+
stopColor: `${hexColor}FF`
|
|
73
|
+
})), /* @__PURE__ */ React2.createElement("linearGradient", {
|
|
74
|
+
id: `${uniqueId}-lg3`,
|
|
75
|
+
x1: "0",
|
|
76
|
+
y1: "0",
|
|
77
|
+
x2: "0",
|
|
78
|
+
y2: "100%"
|
|
79
|
+
}, /* @__PURE__ */ React2.createElement("stop", {
|
|
80
|
+
offset: "10%",
|
|
81
|
+
stopColor: `${hexColor}00`
|
|
82
|
+
}), /* @__PURE__ */ React2.createElement("stop", {
|
|
83
|
+
offset: "50%",
|
|
84
|
+
stopColor: `${hexColor}FF`
|
|
85
|
+
})), /* @__PURE__ */ React2.createElement("linearGradient", {
|
|
86
|
+
id: `${uniqueId}-lg4`,
|
|
87
|
+
x1: "0",
|
|
88
|
+
y1: "0",
|
|
89
|
+
x2: "100%",
|
|
90
|
+
y2: "0"
|
|
91
|
+
}, /* @__PURE__ */ React2.createElement("stop", {
|
|
92
|
+
offset: "50%",
|
|
93
|
+
stopColor: `${hexColor}FF`
|
|
94
|
+
}), /* @__PURE__ */ React2.createElement("stop", {
|
|
95
|
+
offset: "90%",
|
|
96
|
+
stopColor: `${hexColor}00`
|
|
97
|
+
})), /* @__PURE__ */ React2.createElement("clipPath", {
|
|
98
|
+
id: `${uniqueId}-lcp1`
|
|
57
99
|
}, /* @__PURE__ */ React2.createElement("rect", {
|
|
100
|
+
x: sizeToWeight[size],
|
|
101
|
+
y: 0,
|
|
58
102
|
width: "100%",
|
|
59
|
-
height:
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
103
|
+
height: sizeToWeight[size]
|
|
104
|
+
})), /* @__PURE__ */ React2.createElement("clipPath", {
|
|
105
|
+
id: `${uniqueId}-lcp2`
|
|
106
|
+
}, /* @__PURE__ */ React2.createElement("rect", {
|
|
107
|
+
x: paddedCoordinate,
|
|
108
|
+
y: sizeToWeight[size],
|
|
109
|
+
width: sizeToWeight[size],
|
|
110
|
+
height: "100%"
|
|
111
|
+
})), /* @__PURE__ */ React2.createElement("clipPath", {
|
|
112
|
+
id: `${uniqueId}-lcp3`
|
|
113
|
+
}, /* @__PURE__ */ React2.createElement("rect", {
|
|
114
|
+
x: 0,
|
|
115
|
+
y: paddedCoordinate,
|
|
116
|
+
width: paddedCoordinate,
|
|
117
|
+
height: sizeToWeight[size]
|
|
118
|
+
}))), /* @__PURE__ */ React2.createElement(StyledLineLeft, {
|
|
119
|
+
size,
|
|
120
|
+
__duration,
|
|
121
|
+
fill: `url(#${uniqueId}-lg1)`
|
|
122
|
+
}), /* @__PURE__ */ React2.createElement(StyledLineTop, {
|
|
123
|
+
size,
|
|
124
|
+
__duration,
|
|
125
|
+
fill: `url(#${uniqueId}-lg2)`,
|
|
126
|
+
clipPath: `url(#${uniqueId}-lcp1)`
|
|
127
|
+
}), /* @__PURE__ */ React2.createElement(StyledLineRight, {
|
|
128
|
+
size,
|
|
129
|
+
__duration,
|
|
130
|
+
fill: `url(#${uniqueId}-lg3)`,
|
|
131
|
+
clipPath: `url(#${uniqueId}-lcp2)`
|
|
132
|
+
}), /* @__PURE__ */ React2.createElement(StyledLineBottom, {
|
|
133
|
+
size,
|
|
134
|
+
__duration,
|
|
135
|
+
fill: `url(#${uniqueId}-lg4)`,
|
|
136
|
+
clipPath: `url(#${uniqueId}-lcp3)`
|
|
137
|
+
})), text !== "" && showText && /* @__PURE__ */ React2.createElement("span", {
|
|
72
138
|
style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }
|
|
73
139
|
}, text)));
|
|
74
140
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSquareIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { PropsWithChildren, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { defaultProps, DSSquareIndicatorT, SquareIndicatorPropTypes } from './react-desc-prop-types';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(\n () => (withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>),\n [withTooltip],\n );\n\n const uniqueId = useMemo(() => uid(16), []);\n const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} __duration={__duration} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop\n size={size}\n __duration={__duration}\n fill={`url(#${uniqueId}-lg2)`}\n clipPath={`url(#${uniqueId}-lcp1)`}\n />\n <StyledLineRight\n size={size}\n __duration={__duration}\n fill={`url(#${uniqueId}-lg3)`}\n clipPath={`url(#${uniqueId}-lcp2)`}\n />\n <StyledLineBottom\n size={size}\n __duration={__duration}\n fill={`url(#${uniqueId}-lg4)`}\n clipPath={`url(#${uniqueId}-lcp3)`}\n />\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;\n\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const sizeToPx = {
|
|
3
|
+
xs: "16px",
|
|
4
|
+
s: "24px",
|
|
5
|
+
m: "32px",
|
|
6
|
+
l: "48px",
|
|
7
|
+
xl: "56px",
|
|
8
|
+
xxl: "64px"
|
|
9
|
+
};
|
|
10
|
+
const sizeToWeight = {
|
|
11
|
+
xs: "3px",
|
|
12
|
+
s: "3px",
|
|
13
|
+
m: "3px",
|
|
14
|
+
l: "4px",
|
|
15
|
+
xl: "5px",
|
|
16
|
+
xxl: "6px"
|
|
17
|
+
};
|
|
18
|
+
const colorToHex = {
|
|
19
|
+
light: "#FFFFFF",
|
|
20
|
+
dark: "#0F364A"
|
|
21
|
+
};
|
|
22
|
+
const sizeToTextSize = {
|
|
23
|
+
xs: "12px",
|
|
24
|
+
s: "12px",
|
|
25
|
+
m: "12px",
|
|
26
|
+
l: "13px",
|
|
27
|
+
xl: "14px",
|
|
28
|
+
xxl: "16px"
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
colorToHex,
|
|
32
|
+
sizeToPx,
|
|
33
|
+
sizeToTextSize,
|
|
34
|
+
sizeToWeight
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/constants.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const sizeToPx = {\n xs: '16px',\n s: '24px',\n m: '32px',\n l: '48px',\n xl: '56px',\n xxl: '64px',\n};\n\nexport const sizeToWeight = {\n xs: '3px',\n s: '3px',\n m: '3px',\n l: '4px',\n xl: '5px',\n xxl: '6px',\n};\n\nexport const colorToHex = {\n light: '#FFFFFF',\n dark: '#0F364A',\n};\n\nexport const sizeToTextSize = {\n xs: '12px',\n s: '12px',\n m: '12px',\n l: '13px',\n xl: '14px',\n xxl: '16px',\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,6 +1,25 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1
20
|
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "
|
|
3
|
-
const SquareIndicatorPropTypes = {
|
|
21
|
+
import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
|
|
22
|
+
const SquareIndicatorPropTypes = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
|
|
4
23
|
size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
|
|
5
24
|
color: PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
|
|
6
25
|
text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
|
|
@@ -20,8 +39,18 @@ const SquareIndicatorPropTypes = {
|
|
|
20
39
|
"left",
|
|
21
40
|
"left-start"
|
|
22
41
|
]).description("start placement preference for the tooltip").defaultValue("center")
|
|
42
|
+
});
|
|
43
|
+
const defaultProps = {
|
|
44
|
+
size: "m",
|
|
45
|
+
color: "dark",
|
|
46
|
+
text: "",
|
|
47
|
+
showText: true,
|
|
48
|
+
withTooltip: false,
|
|
49
|
+
tooltipStartPlacementPreference: "bottom",
|
|
50
|
+
__duration: 2.5
|
|
23
51
|
};
|
|
24
52
|
export {
|
|
25
|
-
SquareIndicatorPropTypes
|
|
53
|
+
SquareIndicatorPropTypes,
|
|
54
|
+
defaultProps
|
|
26
55
|
};
|
|
27
56
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 '
|
|
5
|
-
"mappings": "AAAA;ACCA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { WeakValidationMap } from 'react';\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 ...globalAttributesPropTypes,\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} as WeakValidationMap<unknown>;\n\nexport const defaultProps: 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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AA2BO,MAAM,2BAA2B,iCACnC,4BADmC;AAAA,EAEtC,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;AAGX,MAAM,eAAyC;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { kfrm } from "@elliemae/ds-system";
|
|
4
|
+
import { sizeToWeight } from "./constants";
|
|
5
|
+
const lineLeftAnimation = kfrm`
|
|
6
|
+
0% {
|
|
7
|
+
y: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
}
|
|
10
|
+
12.5%, 50% {
|
|
11
|
+
y: 0;
|
|
12
|
+
height: 100%;
|
|
13
|
+
}
|
|
14
|
+
62.5%, 100% {
|
|
15
|
+
y: -100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
const lineTopAnimation = kfrm`
|
|
20
|
+
0% {
|
|
21
|
+
x: -100%;
|
|
22
|
+
width: 0%;
|
|
23
|
+
}
|
|
24
|
+
25%, 50% {
|
|
25
|
+
x: -100%;
|
|
26
|
+
width: 200%;
|
|
27
|
+
}
|
|
28
|
+
75%, 100% {
|
|
29
|
+
x: 100%;
|
|
30
|
+
width: 200%;
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
33
|
+
const lineRightAnimation = kfrm`
|
|
34
|
+
0%, 12.5% {
|
|
35
|
+
y: -100%;
|
|
36
|
+
height: 0%;
|
|
37
|
+
}
|
|
38
|
+
37.5%, 62.5% {
|
|
39
|
+
y: -100%;
|
|
40
|
+
height: 200%;
|
|
41
|
+
}
|
|
42
|
+
87.5%, 100% {
|
|
43
|
+
y: 100%;
|
|
44
|
+
height: 200%;
|
|
45
|
+
}
|
|
46
|
+
`;
|
|
47
|
+
const lineBottomAnimation = kfrm`
|
|
48
|
+
0%, 25% {
|
|
49
|
+
x: 200%;
|
|
50
|
+
width: 200%;
|
|
51
|
+
}
|
|
52
|
+
50%, 75% {
|
|
53
|
+
x: 0%;
|
|
54
|
+
width: 200%;
|
|
55
|
+
}
|
|
56
|
+
100% {
|
|
57
|
+
x: -200%;
|
|
58
|
+
width: 200%;
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
61
|
+
const StyledLineLeft = styled.rect`
|
|
62
|
+
x: 0;
|
|
63
|
+
y: 0%;
|
|
64
|
+
width: ${({ size }) => sizeToWeight[size]};
|
|
65
|
+
height: 100%;
|
|
66
|
+
animation: ${lineLeftAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
|
|
67
|
+
`;
|
|
68
|
+
const StyledLineTop = styled.rect`
|
|
69
|
+
x: -100%;
|
|
70
|
+
y: 0;
|
|
71
|
+
width: 200%;
|
|
72
|
+
height: ${({ size }) => sizeToWeight[size]};
|
|
73
|
+
animation: ${lineTopAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
|
|
74
|
+
`;
|
|
75
|
+
const StyledLineRight = styled.rect`
|
|
76
|
+
x: calc(100% - ${({ size }) => sizeToWeight[size]});
|
|
77
|
+
y: -100%;
|
|
78
|
+
width: ${({ size }) => sizeToWeight[size]};
|
|
79
|
+
height: 200%;
|
|
80
|
+
animation: ${lineRightAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
|
|
81
|
+
`;
|
|
82
|
+
const StyledLineBottom = styled.rect`
|
|
83
|
+
x: 0%;
|
|
84
|
+
y: calc(100% - ${({ size }) => sizeToWeight[size]});
|
|
85
|
+
width: 200%;
|
|
86
|
+
height: ${({ size }) => sizeToWeight[size]};
|
|
87
|
+
animation: ${lineBottomAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
|
|
88
|
+
`;
|
|
89
|
+
export {
|
|
90
|
+
StyledLineBottom,
|
|
91
|
+
StyledLineLeft,
|
|
92
|
+
StyledLineRight,
|
|
93
|
+
StyledLineTop
|
|
94
|
+
};
|
|
95
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\nimport { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { sizeToWeight } from './constants';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n __duration: number;\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA;AAOA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe1B,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,eAEvB,qBAAqB,CAAC,EAAE,iBAAiB;AAAA;AAGjD,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,WAAW,aAAa;AAAA,eACxB,oBAAoB,CAAC,EAAE,iBAAiB;AAAA;AAGhD,MAAM,kBAAkB,OAAO;AAAA,mBACnB,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,WAEnC,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,eAEvB,sBAAsB,CAAC,EAAE,iBAAiB;AAAA;AAGlD,MAAM,mBAAmB,OAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,YAElC,CAAC,EAAE,WAAW,aAAa;AAAA,eACxB,uBAAuB,CAAC,EAAE,iBAAiB;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-square-indicator",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
|
|
6
6
|
"files": [
|
|
@@ -43,8 +43,9 @@
|
|
|
43
43
|
"indent": 4
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@elliemae/ds-grid": "3.0.0-
|
|
47
|
-
"@elliemae/ds-
|
|
46
|
+
"@elliemae/ds-grid": "3.0.0-next.10",
|
|
47
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.10",
|
|
48
|
+
"@elliemae/ds-tooltip": "3.0.0-next.10",
|
|
48
49
|
"react-desc": "~4.1.3"
|
|
49
50
|
},
|
|
50
51
|
"peerDependencies": {
|
|
@@ -59,6 +60,7 @@
|
|
|
59
60
|
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
60
61
|
"test": "node ../../scripts/testing/test.mjs",
|
|
61
62
|
"lint": "node ../../scripts/lint.mjs",
|
|
63
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
62
64
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
63
65
|
}
|
|
64
66
|
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { DSSquareIndicatorT } from './react-desc-prop-types';
|
|
4
|
-
export declare const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props>;
|
|
5
|
-
export declare const DSSquareIndicatorWithSchema: {
|
|
6
|
-
(props?: unknown): JSX.Element;
|
|
7
|
-
propTypes: unknown;
|
|
8
|
-
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
9
|
-
};
|
package/dist/types/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator';
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
-
export declare namespace DSSquareIndicatorT {
|
|
3
|
-
interface Props {
|
|
4
|
-
size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
|
|
5
|
-
color?: 'light' | 'dark';
|
|
6
|
-
text?: string;
|
|
7
|
-
showText?: boolean;
|
|
8
|
-
withTooltip: boolean;
|
|
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;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
export declare const SquareIndicatorPropTypes: {
|
|
14
|
-
size: {
|
|
15
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
16
|
-
};
|
|
17
|
-
color: {
|
|
18
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
19
|
-
};
|
|
20
|
-
text: {
|
|
21
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
22
|
-
};
|
|
23
|
-
showText: {
|
|
24
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
25
|
-
};
|
|
26
|
-
withTooltip: {
|
|
27
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
28
|
-
};
|
|
29
|
-
tooltipStartPlacementPreference: {
|
|
30
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
31
|
-
};
|
|
32
|
-
};
|