@elliemae/ds-square-indicator 3.32.0-rc.2 → 3.32.0-rc.4
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.map +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +8 -8
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-square-indicator-valid.js +82 -0
- package/dist/cjs/typescript-testing/typescript-square-indicator-valid.js.map +7 -0
- package/dist/esm/DSSquareIndicator.js.map +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +8 -8
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-square-indicator-valid.js +59 -0
- package/dist/esm/typescript-testing/typescript-square-indicator-valid.js.map +7 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +11 -7
- package/dist/types/typescript-testing/typescript-square-indicator-valid.d.ts +1 -0
- package/package.json +7 -9
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSSquareIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADW0B;AAVjD,mBAA+B;AAC/B,wBAA4B;AAC5B,8BAA+E;AAC/E,iBAAoB;AAEpB,mCAAuD;AACvD,oBAAkG;AAClG,uBAAmE;AAGnE,MAAM,YAAgC,CAAC,UAAU,2EAAG,gBAAM,UAAS;AAE5D,MAAM,oBAAmE,CAAC,UAAU;AACzF,QAAM,uBAAmB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSSquareIndicatorT.InternalProps>(props, defaultProps);\n // eslint-disable-next-line no-unused-vars\n const { height, width, cols, rows, wrap, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n const uniqueId = useMemo(() => uid(16), []);\n const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <StyledContainer\n gutter=\"xs\"\n justifyContent=\"center\"\n role=\"status\"\n aria-label={text || 'Loading...'}\n {...globalAttributes}\n >\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 aria-hidden=\"true\"\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} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </StyledContainer>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\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
|
}
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\nexport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA+D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,6 +34,14 @@ __export(react_desc_prop_types_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
|
+
const defaultProps = {
|
|
38
|
+
size: "m",
|
|
39
|
+
color: "dark",
|
|
40
|
+
text: "",
|
|
41
|
+
showText: true,
|
|
42
|
+
withTooltip: false,
|
|
43
|
+
tooltipStartPlacementPreference: "bottom"
|
|
44
|
+
};
|
|
37
45
|
const SquareIndicatorPropTypes = {
|
|
38
46
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
39
47
|
size: import_ds_props_helpers.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
|
|
@@ -56,12 +64,4 @@ const SquareIndicatorPropTypes = {
|
|
|
56
64
|
"left-start"
|
|
57
65
|
]).description("start placement preference for the tooltip").defaultValue("center")
|
|
58
66
|
};
|
|
59
|
-
const defaultProps = {
|
|
60
|
-
size: "m",
|
|
61
|
-
color: "dark",
|
|
62
|
-
text: "",
|
|
63
|
-
showText: true,
|
|
64
|
-
withTooltip: false,
|
|
65
|
-
tooltipStartPlacementPreference: "bottom"
|
|
66
|
-
};
|
|
67
67
|
//# 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 */\n\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\n interface
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAqD;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\n export interface DefaultProps {\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 }\n\n export interface Props extends Partial<DefaultProps> {}\n\n export interface InternalProps extends DefaultProps {}\n}\n\nexport const defaultProps: DSSquareIndicatorT.DefaultProps = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAqD;AA8B9C,MAAM,eAAgD;AAAA,EAC3D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEO,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,kCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,kCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,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,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var React = __toESM(require("react"));
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import__ = require("../index.js");
|
|
27
|
+
const testPartialDefaults = {
|
|
28
|
+
color: "dark",
|
|
29
|
+
size: "m",
|
|
30
|
+
text: ""
|
|
31
|
+
};
|
|
32
|
+
const testProps = {
|
|
33
|
+
...testPartialDefaults
|
|
34
|
+
};
|
|
35
|
+
const testPropsAsSyntax = {
|
|
36
|
+
...testPartialDefaults
|
|
37
|
+
};
|
|
38
|
+
const testCompleteDefaults = {
|
|
39
|
+
size: "m",
|
|
40
|
+
color: "dark",
|
|
41
|
+
text: "",
|
|
42
|
+
showText: true,
|
|
43
|
+
withTooltip: false,
|
|
44
|
+
tooltipStartPlacementPreference: "bottom"
|
|
45
|
+
};
|
|
46
|
+
const testInternalProps = {
|
|
47
|
+
...testCompleteDefaults
|
|
48
|
+
};
|
|
49
|
+
const testInternalPropsAsSyntax = {
|
|
50
|
+
...testCompleteDefaults
|
|
51
|
+
};
|
|
52
|
+
const testExplicitDefinition = {
|
|
53
|
+
size: "m",
|
|
54
|
+
color: "dark",
|
|
55
|
+
text: "",
|
|
56
|
+
showText: true,
|
|
57
|
+
withTooltip: false,
|
|
58
|
+
tooltipStartPlacementPreference: "bottom"
|
|
59
|
+
};
|
|
60
|
+
const testInferedTypeCompatibility = {
|
|
61
|
+
size: "m",
|
|
62
|
+
color: "dark",
|
|
63
|
+
text: "",
|
|
64
|
+
showText: true,
|
|
65
|
+
withTooltip: false,
|
|
66
|
+
tooltipStartPlacementPreference: "bottom"
|
|
67
|
+
};
|
|
68
|
+
const testDefinitionAsConst = {
|
|
69
|
+
size: "m",
|
|
70
|
+
color: "dark",
|
|
71
|
+
text: "",
|
|
72
|
+
showText: true,
|
|
73
|
+
withTooltip: false,
|
|
74
|
+
tooltipStartPlacementPreference: "bottom"
|
|
75
|
+
};
|
|
76
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { ...testExplicitDefinition }),
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { ...testInferedTypeCompatibility }),
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { ...testDefinitionAsConst }),
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { size: "m", color: "dark", text: "", showText: true, withTooltip: true, tooltipStartPlacementPreference: "bottom" })
|
|
81
|
+
] });
|
|
82
|
+
//# sourceMappingURL=typescript-square-indicator-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-square-indicator-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSquareIndicator } from '../index.js';\nimport type { DSSquareIndicatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSquareIndicatorT.Props;\ntype ComponentPropsInternals = DSSquareIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSSquareIndicatorT.DefaultProps;\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n color: 'dark',\n size: 'm',\n text: '',\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSquareIndicator {...testExplicitDefinition} />\n <DSSquareIndicator {...testInferedTypeCompatibility} />\n <DSSquareIndicator {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSquareIndicator size=\"m\" color=\"dark\" text=\"\" showText withTooltip tooltipStartPlacementPreference=\"bottom\" />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACyErB;AAxEF,eAAkC;AAUlC,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,8BAAmB,GAAG,wBAAwB;AAAA,EAC/C,4CAAC,8BAAmB,GAAG,8BAA8B;AAAA,EACrD,4CAAC,8BAAmB,GAAG,uBAAuB;AAAA,EAE9C,4CAAC,8BAAkB,MAAK,KAAI,OAAM,QAAO,MAAK,IAAG,UAAQ,MAAC,aAAW,MAAC,iCAAgC,UAAS;AAAA,GACjH;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -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", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACW0B,wBAmCrC,YAnCqC;AAVjD,SAAgB,eAAe;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,UAAU,wBAAwB,oCAAoC;AAC/E,SAAS,WAAW;AAEpB,SAAS,cAAc,gCAAgC;AACvD,SAAS,iBAAiB,gBAAgB,eAAe,iBAAiB,wBAAwB;AAClG,SAAS,YAAY,UAAU,gBAAgB,oBAAoB;AAGnE,MAAM,YAAgC,CAAC,UAAU,gCAAG,gBAAM,UAAS;AAE5D,MAAM,oBAAmE,CAAC,UAAU;AACzF,QAAM,mBAAmB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSSquareIndicatorT.InternalProps>(props, defaultProps);\n // eslint-disable-next-line no-unused-vars\n const { height, width, cols, rows, wrap, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n const uniqueId = useMemo(() => uid(16), []);\n const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <StyledContainer\n gutter=\"xs\"\n justifyContent=\"center\"\n role=\"status\"\n aria-label={text || 'Loading...'}\n {...globalAttributes}\n >\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 aria-hidden=\"true\"\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} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </StyledContainer>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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.js';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\nexport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB,mCAAmC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
|
|
3
|
+
const defaultProps = {
|
|
4
|
+
size: "m",
|
|
5
|
+
color: "dark",
|
|
6
|
+
text: "",
|
|
7
|
+
showText: true,
|
|
8
|
+
withTooltip: false,
|
|
9
|
+
tooltipStartPlacementPreference: "bottom"
|
|
10
|
+
};
|
|
3
11
|
const SquareIndicatorPropTypes = {
|
|
4
12
|
...globalAttributesPropTypes,
|
|
5
13
|
size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
|
|
@@ -22,14 +30,6 @@ const SquareIndicatorPropTypes = {
|
|
|
22
30
|
"left-start"
|
|
23
31
|
]).description("start placement preference for the tooltip").defaultValue("center")
|
|
24
32
|
};
|
|
25
|
-
const defaultProps = {
|
|
26
|
-
size: "m",
|
|
27
|
-
color: "dark",
|
|
28
|
-
text: "",
|
|
29
|
-
showText: true,
|
|
30
|
-
withTooltip: false,
|
|
31
|
-
tooltipStartPlacementPreference: "bottom"
|
|
32
|
-
};
|
|
33
33
|
export {
|
|
34
34
|
SquareIndicatorPropTypes,
|
|
35
35
|
defaultProps
|
|
@@ -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 */\n\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\n interface
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,iCAAiC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\n export interface DefaultProps {\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 }\n\n export interface Props extends Partial<DefaultProps> {}\n\n export interface InternalProps extends DefaultProps {}\n}\n\nexport const defaultProps: DSSquareIndicatorT.DefaultProps = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,iCAAiC;AA8B9C,MAAM,eAAgD;AAAA,EAC3D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEO,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,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,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { DSSquareIndicator } from "../index.js";
|
|
4
|
+
const testPartialDefaults = {
|
|
5
|
+
color: "dark",
|
|
6
|
+
size: "m",
|
|
7
|
+
text: ""
|
|
8
|
+
};
|
|
9
|
+
const testProps = {
|
|
10
|
+
...testPartialDefaults
|
|
11
|
+
};
|
|
12
|
+
const testPropsAsSyntax = {
|
|
13
|
+
...testPartialDefaults
|
|
14
|
+
};
|
|
15
|
+
const testCompleteDefaults = {
|
|
16
|
+
size: "m",
|
|
17
|
+
color: "dark",
|
|
18
|
+
text: "",
|
|
19
|
+
showText: true,
|
|
20
|
+
withTooltip: false,
|
|
21
|
+
tooltipStartPlacementPreference: "bottom"
|
|
22
|
+
};
|
|
23
|
+
const testInternalProps = {
|
|
24
|
+
...testCompleteDefaults
|
|
25
|
+
};
|
|
26
|
+
const testInternalPropsAsSyntax = {
|
|
27
|
+
...testCompleteDefaults
|
|
28
|
+
};
|
|
29
|
+
const testExplicitDefinition = {
|
|
30
|
+
size: "m",
|
|
31
|
+
color: "dark",
|
|
32
|
+
text: "",
|
|
33
|
+
showText: true,
|
|
34
|
+
withTooltip: false,
|
|
35
|
+
tooltipStartPlacementPreference: "bottom"
|
|
36
|
+
};
|
|
37
|
+
const testInferedTypeCompatibility = {
|
|
38
|
+
size: "m",
|
|
39
|
+
color: "dark",
|
|
40
|
+
text: "",
|
|
41
|
+
showText: true,
|
|
42
|
+
withTooltip: false,
|
|
43
|
+
tooltipStartPlacementPreference: "bottom"
|
|
44
|
+
};
|
|
45
|
+
const testDefinitionAsConst = {
|
|
46
|
+
size: "m",
|
|
47
|
+
color: "dark",
|
|
48
|
+
text: "",
|
|
49
|
+
showText: true,
|
|
50
|
+
withTooltip: false,
|
|
51
|
+
tooltipStartPlacementPreference: "bottom"
|
|
52
|
+
};
|
|
53
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
54
|
+
/* @__PURE__ */ jsx(DSSquareIndicator, { ...testExplicitDefinition }),
|
|
55
|
+
/* @__PURE__ */ jsx(DSSquareIndicator, { ...testInferedTypeCompatibility }),
|
|
56
|
+
/* @__PURE__ */ jsx(DSSquareIndicator, { ...testDefinitionAsConst }),
|
|
57
|
+
/* @__PURE__ */ jsx(DSSquareIndicator, { size: "m", color: "dark", text: "", showText: true, withTooltip: true, tooltipStartPlacementPreference: "bottom" })
|
|
58
|
+
] });
|
|
59
|
+
//# sourceMappingURL=typescript-square-indicator-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-square-indicator-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSquareIndicator } from '../index.js';\nimport type { DSSquareIndicatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSquareIndicatorT.Props;\ntype ComponentPropsInternals = DSSquareIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSSquareIndicatorT.DefaultProps;\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n color: 'dark',\n size: 'm',\n text: '',\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSquareIndicator {...testExplicitDefinition} />\n <DSSquareIndicator {...testInferedTypeCompatibility} />\n <DSSquareIndicator {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSquareIndicator size=\"m\" color=\"dark\" text=\"\" showText withTooltip tooltipStartPlacementPreference=\"bottom\" />\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyErB,mBAEE,KAFF;AAxEF,SAAS,yBAAyB;AAUlC,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,qBAAmB,GAAG,wBAAwB;AAAA,EAC/C,oBAAC,qBAAmB,GAAG,8BAA8B;AAAA,EACrD,oBAAC,qBAAmB,GAAG,uBAAuB;AAAA,EAE9C,oBAAC,qBAAkB,MAAK,KAAI,OAAM,QAAO,MAAK,IAAG,UAAQ,MAAC,aAAW,MAAC,iCAAgC,UAAS;AAAA,GACjH;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import type { WeakValidationMap } from 'react';
|
|
2
2
|
export declare namespace DSSquareIndicatorT {
|
|
3
|
-
interface
|
|
4
|
-
size
|
|
5
|
-
color
|
|
6
|
-
text
|
|
7
|
-
showText
|
|
3
|
+
interface DefaultProps {
|
|
4
|
+
size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
|
|
5
|
+
color: 'light' | 'dark';
|
|
6
|
+
text: string;
|
|
7
|
+
showText: boolean;
|
|
8
8
|
withTooltip: boolean;
|
|
9
|
-
tooltipStartPlacementPreference
|
|
9
|
+
tooltipStartPlacementPreference: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
|
|
10
|
+
}
|
|
11
|
+
interface Props extends Partial<DefaultProps> {
|
|
12
|
+
}
|
|
13
|
+
interface InternalProps extends DefaultProps {
|
|
10
14
|
}
|
|
11
15
|
}
|
|
16
|
+
export declare const defaultProps: DSSquareIndicatorT.DefaultProps;
|
|
12
17
|
export declare const SquareIndicatorPropTypes: WeakValidationMap<unknown>;
|
|
13
|
-
export declare const defaultProps: DSSquareIndicatorT.Props;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-square-indicator",
|
|
3
|
-
"version": "3.32.0-rc.
|
|
3
|
+
"version": "3.32.0-rc.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
|
|
6
6
|
"files": [
|
|
@@ -45,15 +45,15 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"styled-components": "~5.3.9",
|
|
47
47
|
"uid": "^2.0.1",
|
|
48
|
-
"@elliemae/ds-grid": "3.32.0-rc.
|
|
49
|
-
"@elliemae/ds-system": "3.32.0-rc.
|
|
50
|
-
"@elliemae/ds-props-helpers": "3.32.0-rc.
|
|
51
|
-
"@elliemae/ds-tooltip": "3.32.0-rc.
|
|
48
|
+
"@elliemae/ds-grid": "3.32.0-rc.4",
|
|
49
|
+
"@elliemae/ds-system": "3.32.0-rc.4",
|
|
50
|
+
"@elliemae/ds-props-helpers": "3.32.0-rc.4",
|
|
51
|
+
"@elliemae/ds-tooltip": "3.32.0-rc.4"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
55
55
|
"styled-components": "~5.3.9",
|
|
56
|
-
"@elliemae/ds-monorepo-devops": "3.32.0-rc.
|
|
56
|
+
"@elliemae/ds-monorepo-devops": "3.32.0-rc.4"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"react": "^17.0.2",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
},
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public",
|
|
64
|
-
"typeSafety":
|
|
64
|
+
"typeSafety": true
|
|
65
65
|
},
|
|
66
66
|
"scripts": {
|
|
67
67
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
@@ -70,8 +70,6 @@
|
|
|
70
70
|
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
|
|
71
71
|
"dts": "node ../../../scripts/dts.mjs",
|
|
72
72
|
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
73
|
-
"dev:build": "pnpm --filter {.}... build",
|
|
74
|
-
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
75
73
|
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
76
74
|
}
|
|
77
75
|
}
|