@elliemae/ds-circular-progress-indicator 3.22.0 → 3.23.0-rc.0
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.
|
@@ -164,6 +164,7 @@ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, load
|
|
|
164
164
|
viewBox: "0 0 66 66",
|
|
165
165
|
width: `${sizePx}px`,
|
|
166
166
|
"data-testid": "circular-indicator",
|
|
167
|
+
"aria-label": waiting && !loading ? waitingLabel : loadingLabel,
|
|
167
168
|
children: [
|
|
168
169
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
|
|
169
170
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "grad1", x1: "0%", x2: "100%", y1: "100%", y2: "0%", children: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSCircularProgressIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n\nimport React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n useDeprecateComponent({ componentName: 'ds-circular-progress-indicator', version: 'TBD Date: 2023 Q3' });\n\n const waitingLabel = 'Waiting...';\n const loadingLabel = 'Loading...';\n const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n let sizePx;\n let sizeLabel;\n let strokeWidth;\n let trackWidth;\n let markerHeight = '0.7';\n let markerRefY = '4.8';\n let grayArcStrokeDasharray = '45 170';\n let grayArcStrokeDashoffset = '127.5';\n\n switch (size.toUpperCase()) {\n case 'XS':\n sizePx = 8;\n sizeLabel = 12;\n strokeWidth = 10;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'S':\n sizePx = 16;\n sizeLabel = 12;\n strokeWidth = 8;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'M':\n sizePx = 24;\n sizeLabel = 12;\n strokeWidth = 7;\n trackWidth = 3;\n markerHeight = '1';\n markerRefY = '5.5';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'L':\n sizePx = 32;\n sizeLabel = 13;\n strokeWidth = 6;\n trackWidth = 3;\n markerRefY = '5';\n break;\n case 'XL':\n sizePx = 48;\n sizeLabel = 14;\n strokeWidth = 5;\n trackWidth = 1;\n break;\n case 'XXL':\n sizePx = 56;\n sizeLabel = 16;\n strokeWidth = 4;\n trackWidth = 1;\n break;\n case 'XXXL':\n sizePx = 64;\n sizeLabel = 16;\n strokeWidth = 5;\n trackWidth = 2;\n break;\n default:\n break;\n }\n\n const labelText = (\n <p\n data-testid=\"circular-indicator-label\"\n className={classNameElement('label')}\n style={{ fontSize: `${sizeLabel}px` }}\n >\n {currentLabel}\n </p>\n );\n\n // Only adds the tooltip if sizePx < 17 or showTooltip is true\n const buildIndicator = (Component: JSX.Element) =>\n sizePx < 17 || showTooltip ? (\n <DSTooltip\n containerProps={{\n id: 'ds-circular-progress-indicator',\n 'data-testid': 'circular-indicator-title',\n }}\n interactionType=\"hover\"\n title={currentLabel}\n triggerComponent={Component}\n placement=\"bottom\"\n />\n ) : (\n Component\n );\n\n const grayTrack = (\n <circle\n className={classNameElement('track')}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const grayArc = (\n <circle\n className={classNameElement('arc-gray')}\n stroke=\"#E0E3E8\"\n strokeDasharray={`${grayArcStrokeDasharray}`}\n strokeDashoffset={`${grayArcStrokeDashoffset}`}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const indicator = (\n <svg\n height={`${sizePx}px`}\n version=\"1.1\"\n viewBox=\"0 0 66 66\"\n width={`${sizePx}px`}\n data-testid=\"circular-indicator\"\n >\n <defs>\n <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n </linearGradient>\n <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n </linearGradient>\n <marker\n id=\"inverseL\"\n viewBox=\"0 0 5 10\"\n refX=\"0.5\"\n refY={`${markerRefY}`}\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.5\"\n markerHeight={`${markerHeight}`}\n orient=\"auto\"\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n <marker\n id=\"inverseR\"\n viewBox=\"0 0 5 10\"\n refX=\"0\"\n refY=\"5\"\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.7\"\n markerHeight={`${markerHeight}`}\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n </defs>\n {grayTrack}\n {!waiting && (\n <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n <path\n className={classNameElement('arc-blue')}\n d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n stroke=\"#5594e2\"\n strokeWidth={`${strokeWidth - 0.5}px`}\n strokeLinecap=\"round\"\n data-testid=\"circular-indicator-blue-arc\"\n />\n <path\n className={classNameElement('arc-white')}\n d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n stroke=\"#FFF\"\n strokeWidth={`${strokeWidth + 2}px`}\n markerStart=\"url(#inverseR)\"\n markerEnd=\"url(#inverseL)\"\n />\n {grayArc}\n </g>\n )}\n </svg>\n );\n\n return (\n <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n {buildIndicator(indicator)}\n {showLabel && labelText}\n </div>\n );\n};\n\nCircularProgressIndicator.defaultProps = {\n size: 'm',\n showLabel: false,\n showTooltip: false,\n waiting: false,\n loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n .description('Defines the size of the indicator')\n .defaultValue('m'),\n showLabel: PropTypes.bool\n .description('Wheter the indicator displays its state on a label or not')\n .defaultValue(false),\n showTooltip: PropTypes.bool\n .description('Wheter the indicator displays its state on a tooltip or not')\n .defaultValue(false),\n waiting: PropTypes.bool\n .description('Defines the state of the indicator as Waiting and only displays the gray track')\n .defaultValue(false),\n loading: PropTypes.bool\n .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuFnB;AAjFJ,0BAAsC;AACtC,8BAAoC;AACpC,2BAA0C;AAC1C,wBAAsB;AAEtB,MAAM,EAAE,gBAAgB,iBAAiB,QAAI,gDAA0B,6BAA6B;AAEpG,MAAM,4BAA4B,CAAC,EAAE,MAAM,WAAW,aAAa,SAAS,QAAQ,MAAM;AACxF,iDAAsB,EAAE,eAAe,kCAAkC,SAAS,oBAAoB,CAAC;AAEvG,QAAM,eAAe;AACrB,QAAM,eAAe;AACrB,QAAM,eAAe,WAAW,CAAC,UAAU,eAAe;AAC1D,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI,eAAe;AACnB,MAAI,aAAa;AACjB,MAAI,yBAAyB;AAC7B,MAAI,0BAA0B;AAE9B,UAAQ,KAAK,YAAY,GAAG;AAAA,IAC1B,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,mBAAa;AACb,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,mBAAa;AACb;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,IACF,KAAK;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,IACF;AACE;AAAA,EACJ;AAEA,QAAM,YACJ;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW,iBAAiB,OAAO;AAAA,MACnC,OAAO,EAAE,UAAU,GAAG,cAAc;AAAA,MAEnC;AAAA;AAAA,EACH;AAIF,QAAM,iBAAiB,CAAC,cACtB,SAAS,MAAM,cACb;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACC,gBAAgB;AAAA,QACd,IAAI;AAAA,QACJ,eAAe;AAAA,MACjB;AAAA,MACA,iBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB,WAAU;AAAA;AAAA,EACZ,IAEA;AAGJ,QAAM,YACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB,OAAO;AAAA,MACnC,IAAG;AAAA,MACH,IAAG;AAAA,MACH,MAAK;AAAA,MACL,GAAE;AAAA,MACF,aAAa,GAAG;AAAA;AAAA,EAClB;AAGF,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB,UAAU;AAAA,MACtC,QAAO;AAAA,MACP,iBAAiB,GAAG;AAAA,MACpB,kBAAkB,GAAG;AAAA,MACrB,IAAG;AAAA,MACH,IAAG;AAAA,MACH,MAAK;AAAA,MACL,GAAE;AAAA,MACF,aAAa,GAAG;AAAA;AAAA,EAClB;AAGF,QAAM,YACJ;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,GAAG;AAAA,MACX,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,OAAO,GAAG;AAAA,MACV,eAAY;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n\nimport React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n useDeprecateComponent({ componentName: 'ds-circular-progress-indicator', version: 'TBD Date: 2023 Q3' });\n\n const waitingLabel = 'Waiting...';\n const loadingLabel = 'Loading...';\n const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n let sizePx;\n let sizeLabel;\n let strokeWidth;\n let trackWidth;\n let markerHeight = '0.7';\n let markerRefY = '4.8';\n let grayArcStrokeDasharray = '45 170';\n let grayArcStrokeDashoffset = '127.5';\n\n switch (size.toUpperCase()) {\n case 'XS':\n sizePx = 8;\n sizeLabel = 12;\n strokeWidth = 10;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'S':\n sizePx = 16;\n sizeLabel = 12;\n strokeWidth = 8;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'M':\n sizePx = 24;\n sizeLabel = 12;\n strokeWidth = 7;\n trackWidth = 3;\n markerHeight = '1';\n markerRefY = '5.5';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'L':\n sizePx = 32;\n sizeLabel = 13;\n strokeWidth = 6;\n trackWidth = 3;\n markerRefY = '5';\n break;\n case 'XL':\n sizePx = 48;\n sizeLabel = 14;\n strokeWidth = 5;\n trackWidth = 1;\n break;\n case 'XXL':\n sizePx = 56;\n sizeLabel = 16;\n strokeWidth = 4;\n trackWidth = 1;\n break;\n case 'XXXL':\n sizePx = 64;\n sizeLabel = 16;\n strokeWidth = 5;\n trackWidth = 2;\n break;\n default:\n break;\n }\n\n const labelText = (\n <p\n data-testid=\"circular-indicator-label\"\n className={classNameElement('label')}\n style={{ fontSize: `${sizeLabel}px` }}\n >\n {currentLabel}\n </p>\n );\n\n // Only adds the tooltip if sizePx < 17 or showTooltip is true\n const buildIndicator = (Component: JSX.Element) =>\n sizePx < 17 || showTooltip ? (\n <DSTooltip\n containerProps={{\n id: 'ds-circular-progress-indicator',\n 'data-testid': 'circular-indicator-title',\n }}\n interactionType=\"hover\"\n title={currentLabel}\n triggerComponent={Component}\n placement=\"bottom\"\n />\n ) : (\n Component\n );\n\n const grayTrack = (\n <circle\n className={classNameElement('track')}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const grayArc = (\n <circle\n className={classNameElement('arc-gray')}\n stroke=\"#E0E3E8\"\n strokeDasharray={`${grayArcStrokeDasharray}`}\n strokeDashoffset={`${grayArcStrokeDashoffset}`}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const indicator = (\n <svg\n height={`${sizePx}px`}\n version=\"1.1\"\n viewBox=\"0 0 66 66\"\n width={`${sizePx}px`}\n data-testid=\"circular-indicator\"\n aria-label={waiting && !loading ? waitingLabel : loadingLabel}\n >\n <defs>\n <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n </linearGradient>\n <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n </linearGradient>\n <marker\n id=\"inverseL\"\n viewBox=\"0 0 5 10\"\n refX=\"0.5\"\n refY={`${markerRefY}`}\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.5\"\n markerHeight={`${markerHeight}`}\n orient=\"auto\"\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n <marker\n id=\"inverseR\"\n viewBox=\"0 0 5 10\"\n refX=\"0\"\n refY=\"5\"\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.7\"\n markerHeight={`${markerHeight}`}\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n </defs>\n {grayTrack}\n {!waiting && (\n <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n <path\n className={classNameElement('arc-blue')}\n d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n stroke=\"#5594e2\"\n strokeWidth={`${strokeWidth - 0.5}px`}\n strokeLinecap=\"round\"\n data-testid=\"circular-indicator-blue-arc\"\n />\n <path\n className={classNameElement('arc-white')}\n d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n stroke=\"#FFF\"\n strokeWidth={`${strokeWidth + 2}px`}\n markerStart=\"url(#inverseR)\"\n markerEnd=\"url(#inverseL)\"\n />\n {grayArc}\n </g>\n )}\n </svg>\n );\n\n return (\n <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n {buildIndicator(indicator)}\n {showLabel && labelText}\n </div>\n );\n};\n\nCircularProgressIndicator.defaultProps = {\n size: 'm',\n showLabel: false,\n showTooltip: false,\n waiting: false,\n loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n .description('Defines the size of the indicator')\n .defaultValue('m'),\n showLabel: PropTypes.bool\n .description('Wheter the indicator displays its state on a label or not')\n .defaultValue(false),\n showTooltip: PropTypes.bool\n .description('Wheter the indicator displays its state on a tooltip or not')\n .defaultValue(false),\n waiting: PropTypes.bool\n .description('Defines the state of the indicator as Waiting and only displays the gray track')\n .defaultValue(false),\n loading: PropTypes.bool\n .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["DSTooltip"]
|
|
7
7
|
}
|
|
@@ -130,6 +130,7 @@ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, load
|
|
|
130
130
|
viewBox: "0 0 66 66",
|
|
131
131
|
width: `${sizePx}px`,
|
|
132
132
|
"data-testid": "circular-indicator",
|
|
133
|
+
"aria-label": waiting && !loading ? waitingLabel : loadingLabel,
|
|
133
134
|
children: [
|
|
134
135
|
/* @__PURE__ */ jsxs("defs", { children: [
|
|
135
136
|
/* @__PURE__ */ jsxs("linearGradient", { id: "grad1", x1: "0%", x2: "100%", y1: "100%", y2: "0%", children: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCircularProgressIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n\nimport React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n useDeprecateComponent({ componentName: 'ds-circular-progress-indicator', version: 'TBD Date: 2023 Q3' });\n\n const waitingLabel = 'Waiting...';\n const loadingLabel = 'Loading...';\n const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n let sizePx;\n let sizeLabel;\n let strokeWidth;\n let trackWidth;\n let markerHeight = '0.7';\n let markerRefY = '4.8';\n let grayArcStrokeDasharray = '45 170';\n let grayArcStrokeDashoffset = '127.5';\n\n switch (size.toUpperCase()) {\n case 'XS':\n sizePx = 8;\n sizeLabel = 12;\n strokeWidth = 10;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'S':\n sizePx = 16;\n sizeLabel = 12;\n strokeWidth = 8;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'M':\n sizePx = 24;\n sizeLabel = 12;\n strokeWidth = 7;\n trackWidth = 3;\n markerHeight = '1';\n markerRefY = '5.5';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'L':\n sizePx = 32;\n sizeLabel = 13;\n strokeWidth = 6;\n trackWidth = 3;\n markerRefY = '5';\n break;\n case 'XL':\n sizePx = 48;\n sizeLabel = 14;\n strokeWidth = 5;\n trackWidth = 1;\n break;\n case 'XXL':\n sizePx = 56;\n sizeLabel = 16;\n strokeWidth = 4;\n trackWidth = 1;\n break;\n case 'XXXL':\n sizePx = 64;\n sizeLabel = 16;\n strokeWidth = 5;\n trackWidth = 2;\n break;\n default:\n break;\n }\n\n const labelText = (\n <p\n data-testid=\"circular-indicator-label\"\n className={classNameElement('label')}\n style={{ fontSize: `${sizeLabel}px` }}\n >\n {currentLabel}\n </p>\n );\n\n // Only adds the tooltip if sizePx < 17 or showTooltip is true\n const buildIndicator = (Component: JSX.Element) =>\n sizePx < 17 || showTooltip ? (\n <DSTooltip\n containerProps={{\n id: 'ds-circular-progress-indicator',\n 'data-testid': 'circular-indicator-title',\n }}\n interactionType=\"hover\"\n title={currentLabel}\n triggerComponent={Component}\n placement=\"bottom\"\n />\n ) : (\n Component\n );\n\n const grayTrack = (\n <circle\n className={classNameElement('track')}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const grayArc = (\n <circle\n className={classNameElement('arc-gray')}\n stroke=\"#E0E3E8\"\n strokeDasharray={`${grayArcStrokeDasharray}`}\n strokeDashoffset={`${grayArcStrokeDashoffset}`}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const indicator = (\n <svg\n height={`${sizePx}px`}\n version=\"1.1\"\n viewBox=\"0 0 66 66\"\n width={`${sizePx}px`}\n data-testid=\"circular-indicator\"\n >\n <defs>\n <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n </linearGradient>\n <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n </linearGradient>\n <marker\n id=\"inverseL\"\n viewBox=\"0 0 5 10\"\n refX=\"0.5\"\n refY={`${markerRefY}`}\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.5\"\n markerHeight={`${markerHeight}`}\n orient=\"auto\"\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n <marker\n id=\"inverseR\"\n viewBox=\"0 0 5 10\"\n refX=\"0\"\n refY=\"5\"\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.7\"\n markerHeight={`${markerHeight}`}\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n </defs>\n {grayTrack}\n {!waiting && (\n <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n <path\n className={classNameElement('arc-blue')}\n d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n stroke=\"#5594e2\"\n strokeWidth={`${strokeWidth - 0.5}px`}\n strokeLinecap=\"round\"\n data-testid=\"circular-indicator-blue-arc\"\n />\n <path\n className={classNameElement('arc-white')}\n d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n stroke=\"#FFF\"\n strokeWidth={`${strokeWidth + 2}px`}\n markerStart=\"url(#inverseR)\"\n markerEnd=\"url(#inverseL)\"\n />\n {grayArc}\n </g>\n )}\n </svg>\n );\n\n return (\n <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n {buildIndicator(indicator)}\n {showLabel && labelText}\n </div>\n );\n};\n\nCircularProgressIndicator.defaultProps = {\n size: 'm',\n showLabel: false,\n showTooltip: false,\n waiting: false,\n loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n .description('Defines the size of the indicator')\n .defaultValue('m'),\n showLabel: PropTypes.bool\n .description('Wheter the indicator displays its state on a label or not')\n .defaultValue(false),\n showTooltip: PropTypes.bool\n .description('Wheter the indicator displays its state on a tooltip or not')\n .defaultValue(false),\n waiting: PropTypes.bool\n .description('Defines the state of the indicator as Waiting and only displays the gray track')\n .defaultValue(false),\n loading: PropTypes.bool\n .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuFnB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable eslint-comments/no-unlimited-disable */\n/* eslint-disable */\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n\nimport React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n useDeprecateComponent({ componentName: 'ds-circular-progress-indicator', version: 'TBD Date: 2023 Q3' });\n\n const waitingLabel = 'Waiting...';\n const loadingLabel = 'Loading...';\n const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n let sizePx;\n let sizeLabel;\n let strokeWidth;\n let trackWidth;\n let markerHeight = '0.7';\n let markerRefY = '4.8';\n let grayArcStrokeDasharray = '45 170';\n let grayArcStrokeDashoffset = '127.5';\n\n switch (size.toUpperCase()) {\n case 'XS':\n sizePx = 8;\n sizeLabel = 12;\n strokeWidth = 10;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'S':\n sizePx = 16;\n sizeLabel = 12;\n strokeWidth = 8;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'M':\n sizePx = 24;\n sizeLabel = 12;\n strokeWidth = 7;\n trackWidth = 3;\n markerHeight = '1';\n markerRefY = '5.5';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'L':\n sizePx = 32;\n sizeLabel = 13;\n strokeWidth = 6;\n trackWidth = 3;\n markerRefY = '5';\n break;\n case 'XL':\n sizePx = 48;\n sizeLabel = 14;\n strokeWidth = 5;\n trackWidth = 1;\n break;\n case 'XXL':\n sizePx = 56;\n sizeLabel = 16;\n strokeWidth = 4;\n trackWidth = 1;\n break;\n case 'XXXL':\n sizePx = 64;\n sizeLabel = 16;\n strokeWidth = 5;\n trackWidth = 2;\n break;\n default:\n break;\n }\n\n const labelText = (\n <p\n data-testid=\"circular-indicator-label\"\n className={classNameElement('label')}\n style={{ fontSize: `${sizeLabel}px` }}\n >\n {currentLabel}\n </p>\n );\n\n // Only adds the tooltip if sizePx < 17 or showTooltip is true\n const buildIndicator = (Component: JSX.Element) =>\n sizePx < 17 || showTooltip ? (\n <DSTooltip\n containerProps={{\n id: 'ds-circular-progress-indicator',\n 'data-testid': 'circular-indicator-title',\n }}\n interactionType=\"hover\"\n title={currentLabel}\n triggerComponent={Component}\n placement=\"bottom\"\n />\n ) : (\n Component\n );\n\n const grayTrack = (\n <circle\n className={classNameElement('track')}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const grayArc = (\n <circle\n className={classNameElement('arc-gray')}\n stroke=\"#E0E3E8\"\n strokeDasharray={`${grayArcStrokeDasharray}`}\n strokeDashoffset={`${grayArcStrokeDashoffset}`}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const indicator = (\n <svg\n height={`${sizePx}px`}\n version=\"1.1\"\n viewBox=\"0 0 66 66\"\n width={`${sizePx}px`}\n data-testid=\"circular-indicator\"\n aria-label={waiting && !loading ? waitingLabel : loadingLabel}\n >\n <defs>\n <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n </linearGradient>\n <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n </linearGradient>\n <marker\n id=\"inverseL\"\n viewBox=\"0 0 5 10\"\n refX=\"0.5\"\n refY={`${markerRefY}`}\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.5\"\n markerHeight={`${markerHeight}`}\n orient=\"auto\"\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n <marker\n id=\"inverseR\"\n viewBox=\"0 0 5 10\"\n refX=\"0\"\n refY=\"5\"\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.7\"\n markerHeight={`${markerHeight}`}\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n </defs>\n {grayTrack}\n {!waiting && (\n <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n <path\n className={classNameElement('arc-blue')}\n d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n stroke=\"#5594e2\"\n strokeWidth={`${strokeWidth - 0.5}px`}\n strokeLinecap=\"round\"\n data-testid=\"circular-indicator-blue-arc\"\n />\n <path\n className={classNameElement('arc-white')}\n d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n stroke=\"#FFF\"\n strokeWidth={`${strokeWidth + 2}px`}\n markerStart=\"url(#inverseR)\"\n markerEnd=\"url(#inverseL)\"\n />\n {grayArc}\n </g>\n )}\n </svg>\n );\n\n return (\n <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n {buildIndicator(indicator)}\n {showLabel && labelText}\n </div>\n );\n};\n\nCircularProgressIndicator.defaultProps = {\n size: 'm',\n showLabel: false,\n showTooltip: false,\n waiting: false,\n loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n .description('Defines the size of the indicator')\n .defaultValue('m'),\n showLabel: PropTypes.bool\n .description('Wheter the indicator displays its state on a label or not')\n .defaultValue(false),\n showTooltip: PropTypes.bool\n .description('Wheter the indicator displays its state on a tooltip or not')\n .defaultValue(false),\n waiting: PropTypes.bool\n .description('Defines the state of the indicator as Waiting and only displays the gray track')\n .defaultValue(false),\n loading: PropTypes.bool\n .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-circular-progress-indicator",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.23.0-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Circular progress indicator",
|
|
6
6
|
"files": [
|
|
@@ -53,12 +53,12 @@
|
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"styled-components": "~5.3.9",
|
|
55
55
|
"uid": "~2.0.1",
|
|
56
|
-
"@elliemae/ds-classnames": "3.
|
|
57
|
-
"@elliemae/ds-grid": "3.
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"@elliemae/ds-
|
|
61
|
-
"@elliemae/ds-
|
|
56
|
+
"@elliemae/ds-classnames": "3.23.0-rc.0",
|
|
57
|
+
"@elliemae/ds-grid": "3.23.0-rc.0",
|
|
58
|
+
"@elliemae/ds-props-helpers": "3.23.0-rc.0",
|
|
59
|
+
"@elliemae/ds-utilities": "3.23.0-rc.0",
|
|
60
|
+
"@elliemae/ds-system": "3.23.0-rc.0",
|
|
61
|
+
"@elliemae/ds-tooltip": "3.23.0-rc.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@elliemae/pui-cli": "~9.0.0-next.22",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@testing-library/react": "~12.1.3",
|
|
67
67
|
"@testing-library/user-event": "~13.5.0",
|
|
68
68
|
"jest-axe": "^7.0.1",
|
|
69
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
69
|
+
"@elliemae/ds-monorepo-devops": "3.23.0-rc.0"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
72
|
"lodash": "^4.17.21",
|