@elliemae/ds-circular-progress-indicator 2.2.0 → 2.3.0-alpha.3

package/esm/v2/DSCircularIndeterminateIndicator.js

@@ -0,0 +1,120 @@
+import * as React from "react";
+import React2 from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip";
+import { describe } from "react-desc";
+import styled from "styled-components";
+import { kfrm } from "@elliemae/ds-system";
+import { uid } from "uid";
+import { CircularIndeterminateIndicatorPropTypes } from "./react-desc-prop-types";
+const r = kfrm`to { transform: rotate(2turn) }`;
+const s = kfrm`0%, 39% { stroke-dasharray: 942px 2826px }`;
+const StyledSvg = styled.svg`
+  #gg {
+    transform: rotate(45deg);
+    stroke: url(#${(props) => props.linearGradientUid});
+    mask: url(#${(props) => props.maskUid});
+  }
+  mask use {
+    stroke: #fff;
+    stroke-linecap: round;
+    stroke-dasharray: 942px 2826px;
+    animation: ${r} ${(props) => props.duration}s cubic-bezier(0.5, -0.43, 0.5, 1.43) infinite,
+      ${s} ${(props) => props.duration / 2}s ease-in-out infinite alternate;
+  }
+`;
+const sizeToPx = {
+  xs: "16px",
+  s: "24px",
+  m: "32px",
+  l: "48px",
+  xl: "56px",
+  xxl: "64px"
+};
+const sizeToWeight = {
+  xs: "10%",
+  s: "9%",
+  m: "8%",
+  l: "6%",
+  xl: "5%",
+  xxl: "4%"
+};
+const colorToHex = {
+  light: "#FFFFFF",
+  dark: "#0F364A"
+};
+const sizeToTextSize = {
+  xs: "12px",
+  s: "12px",
+  m: "12px",
+  l: "13px",
+  xl: "14px",
+  xxl: "16px"
+};
+const DSCircularIndeterminateIndicator = ({
+  size = "m",
+  color = "dark",
+  text = "",
+  showText = true,
+  withTooltip = false,
+  tooltipStartPlacementPreference = "bottom",
+  __duration = 1.5
+}) => {
+  const Wrapper = withTooltip ? DSTooltipV3 : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
+  const linearGradientUid = uid(16);
+  const maskUid = uid(16);
+  const circleUid = uid(16);
+  return /* @__PURE__ */ React2.createElement(Grid, {
+    gutter: "xs",
+    justifyContent: "center",
+    role: "status"
+  }, /* @__PURE__ */ React2.createElement(Wrapper, {
+    text,
+    textAlign: "center",
+    startPlacementPreference: tooltipStartPlacementPreference
+  }, /* @__PURE__ */ React2.createElement(StyledSvg, {
+    viewBox: "-1950 -975 3900 1950",
+    fill: "none",
+    stroke: "transparent",
+    strokeWidth: sizeToWeight[size],
+    width: sizeToPx[size],
+    height: sizeToPx[size],
+    style: { display: "block", margin: "auto" },
+    linearGradientUid,
+    maskUid,
+    duration: __duration
+  }, /* @__PURE__ */ React2.createElement("g", {
+    transform: "scale(2.298)"
+  }, /* @__PURE__ */ React2.createElement("linearGradient", {
+    id: linearGradientUid
+  }, /* @__PURE__ */ React2.createElement("stop", {
+    stopColor: color === "dark" ? "#48a3ff" : "#ccd6ff"
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    stopColor: color === "dark" ? "#49d0ff" : "#ebf6ff",
+    offset: "1"
+  })), /* @__PURE__ */ React2.createElement("mask", {
+    id: maskUid
+  }, /* @__PURE__ */ React2.createElement("circle", {
+    r: "1200",
+    fill: "#000"
+  }), /* @__PURE__ */ React2.createElement("use", {
+    xlinkHref: `#${circleUid}`
+  })), /* @__PURE__ */ React2.createElement("circle", {
+    id: circleUid,
+    r: "600"
+  }), /* @__PURE__ */ React2.createElement("g", {
+    id: "gg"
+  }, /* @__PURE__ */ React2.createElement("use", {
+    xlinkHref: `#${circleUid}`
+  })))), text !== "" && showText && /* @__PURE__ */ React2.createElement("span", {
+    style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }
+  }, text)));
+};
+DSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;
+const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);
+DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;
+export {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+};
+//# sourceMappingURL=DSCircularIndeterminateIndicator.js.map

package/esm/v2/DSCircularIndeterminateIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\nimport { uid } from 'uid';\nimport { DSCircularIndeterminateIndicatorT, CircularIndeterminateIndicatorPropTypes } from './react-desc-prop-types';\n\nconst r = kfrm`to { transform: rotate(2turn) }`;\nconst s = kfrm`0%, 39% { stroke-dasharray: 942px 2826px }`;\n\nconst StyledSvg = styled.svg<{ linearGradientUid: string; maskUid: string; duration: number }>`\n  #gg {\n    transform: rotate(45deg);\n    stroke: url(#${(props) => props.linearGradientUid});\n    mask: url(#${(props) => props.maskUid});\n  }\n  mask use {\n    stroke: #fff;\n    stroke-linecap: round;\n    stroke-dasharray: 942px 2826px;\n    animation: ${r} ${(props) => props.duration}s cubic-bezier(0.5, -0.43, 0.5, 1.43) infinite,\n      ${s} ${(props) => props.duration / 2}s ease-in-out infinite alternate;\n  }\n`;\n\nconst sizeToPx = {\n  xs: '16px',\n  s: '24px',\n  m: '32px',\n  l: '48px',\n  xl: '56px',\n  xxl: '64px',\n};\n\nconst sizeToWeight = {\n  xs: '10%',\n  s: '9%',\n  m: '8%',\n  l: '6%',\n  xl: '5%',\n  xxl: '4%',\n};\n\nconst colorToHex = {\n  light: '#FFFFFF',\n  dark: '#0F364A',\n};\n\nconst sizeToTextSize = {\n  xs: '12px',\n  s: '12px',\n  m: '12px',\n  l: '13px',\n  xl: '14px',\n  xxl: '16px',\n};\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = ({\n  size = 'm',\n  color = 'dark',\n  text = '',\n  showText = true,\n  withTooltip = false,\n  tooltipStartPlacementPreference = 'bottom',\n  __duration = 1.5,\n}) => {\n  const Wrapper = withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>;\n\n  const linearGradientUid = uid(16);\n  const maskUid = uid(16);\n  const circleUid = uid(16);\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\">\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg\n          viewBox=\"-1950 -975 3900 1950\"\n          fill=\"none\"\n          stroke=\"transparent\"\n          strokeWidth={sizeToWeight[size]}\n          width={sizeToPx[size]}\n          height={sizeToPx[size]}\n          style={{ display: 'block', margin: 'auto' }}\n          linearGradientUid={linearGradientUid}\n          maskUid={maskUid}\n          duration={__duration}\n        >\n          <g transform=\"scale(2.298)\">\n            <linearGradient id={linearGradientUid}>\n              <stop stopColor={color === 'dark' ? '#48a3ff' : '#ccd6ff'}></stop>\n              <stop stopColor={color === 'dark' ? '#49d0ff' : '#ebf6ff'} offset=\"1\"></stop>\n            </linearGradient>\n            <mask id={maskUid}>\n              <circle r=\"1200\" fill=\"#000\"></circle>\n              <use xlinkHref={`#${circleUid}`}></use>\n            </mask>\n            <circle id={circleUid} r=\"600\"></circle>\n            <g id=\"gg\">\n              <use xlinkHref={`#${circleUid}`}></use>\n            </g>\n          </g>\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes as WeakValidationMap<unknown>;\n\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,IAAI;AACV,MAAM,IAAI;AAEV,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA,mBAGN,CAAC,UAAU,MAAM;AAAA,iBACnB,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMjB,KAAK,CAAC,UAAU,MAAM;AAAA,QAC/B,KAAK,CAAC,UAAU,MAAM,WAAW;AAAA;AAAA;AAIzC,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA;AAGR,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,mCAAiG,CAAC;AAAA,EAC7G,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,kCAAkC;AAAA,EAClC,aAAa;AAAA,MACT;AACJ,QAAM,UAAU,cAAc,cAAc,CAAC,EAAE,eAA2C,4DAAG;AAE7F,QAAM,oBAAoB,IAAI;AAC9B,QAAM,UAAU,IAAI;AACpB,QAAM,YAAY,IAAI;AAEtB,SACE,qCAAC,MAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,KAC7C,qCAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC,WAAD;AAAA,IACE,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAa,aAAa;AAAA,IAC1B,OAAO,SAAS;AAAA,IAChB,QAAQ,SAAS;AAAA,IACjB,OAAO,EAAE,SAAS,SAAS,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,KAEV,qCAAC,KAAD;AAAA,IAAG,WAAU;AAAA,KACX,qCAAC,kBAAD;AAAA,IAAgB,IAAI;AAAA,KAClB,qCAAC,QAAD;AAAA,IAAM,WAAW,UAAU,SAAS,YAAY;AAAA,MAChD,qCAAC,QAAD;AAAA,IAAM,WAAW,UAAU,SAAS,YAAY;AAAA,IAAW,QAAO;AAAA,OAEpE,qCAAC,QAAD;AAAA,IAAM,IAAI;AAAA,KACR,qCAAC,UAAD;AAAA,IAAQ,GAAE;AAAA,IAAO,MAAK;AAAA,MACtB,qCAAC,OAAD;AAAA,IAAK,WAAW,IAAI;AAAA,OAEtB,qCAAC,UAAD;AAAA,IAAQ,IAAI;AAAA,IAAW,GAAE;AAAA,MACzB,qCAAC,KAAD;AAAA,IAAG,IAAG;AAAA,KACJ,qCAAC,OAAD;AAAA,IAAK,WAAW,IAAI;AAAA,SAIzB,SAAS,MAAM,YACd,qCAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,WAAW,QAAQ,UAAU,eAAe;AAAA,KAAU;AAAA;AAOtF,iCAAiC,YAAY;AAEtC,MAAM,6CAA6C,SAAS;AACnE,2CAA2C,YAAY;",
+  "names": []
+}

package/esm/v2/index.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+} from "./DSCircularIndeterminateIndicator";
+export {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+};
+//# sourceMappingURL=index.js.map

package/esm/v2/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n  DSCircularIndeterminateIndicator,\n  DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator';\n"],
+  "mappings": "AAAA;ACAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/v2/react-desc-prop-types.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+const CircularIndeterminateIndicatorPropTypes = {
+  size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
+  color: PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
+  text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: PropTypes.oneOf([
+    "top-start",
+    "top",
+    "top-end",
+    "right-start",
+    "right",
+    "right-end",
+    "bottom-end",
+    "bottom",
+    "bottom-start",
+    "left-end",
+    "left",
+    "left-start"
+  ]).description("start placement preference for the tooltip").defaultValue("center")
+};
+export {
+  CircularIndeterminateIndicatorPropTypes
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/esm/v2/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes } from 'react-desc';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\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 CircularIndeterminateIndicatorPropTypes = {\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n  withTooltip: PropTypes.bool\n    .description('Whether to include a tooltip that shows the optional text on hover')\n    .defaultValue(false),\n  tooltipStartPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preference for the tooltip')\n    .defaultValue('center'),\n};\n"],
+  "mappings": "AAAA;ACCA;AA0BO,MAAM,0CAA0C;AAAA,EACrD,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;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-circular-progress-indicator",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Circular progress indicator",
   "module": "./esm/index.js",
@@ -11,6 +11,18 @@
       "import": "./esm/index.js",
       "require": "./cjs/index.js"
     },
+    "./v2/react-desc-prop-types": {
+      "import": "./esm/v2/react-desc-prop-types.js",
+      "require": "./cjs/v2/react-desc-prop-types.js"
+    },
+    "./v2": {
+      "import": "./esm/v2/index.js",
+      "require": "./cjs/v2/index.js"
+    },
+    "./v2/DSCircularIndeterminateIndicator": {
+      "import": "./esm/v2/DSCircularIndeterminateIndicator.js",
+      "require": "./cjs/v2/DSCircularIndeterminateIndicator.js"
+    },
     "./DSCircularProgressIndicator": {
       "import": "./esm/DSCircularProgressIndicator.js",
       "require": "./cjs/DSCircularProgressIndicator.js"
@@ -36,8 +48,8 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.2.0",
-    "@elliemae/ds-tooltip": "2.2.0",
+    "@elliemae/ds-classnames": "2.3.0-alpha.3",
+    "@elliemae/ds-tooltip": "2.3.0-alpha.3",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {

package/types/index.d.ts

@@ -1 +1,2 @@
 export { default, default as DSCircularProgressIndicator, CircularProgressIndicatorWithSchema, } from './DSCircularProgressIndicator';
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2';

package/types/v2/DSCircularIndeterminateIndicator.d.ts

@@ -0,0 +1,9 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+import React from 'react';
+import { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types';
+export declare const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props>;
+export declare const DSCircularIndeterminateIndicatorWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};

package/types/v2/index.d.ts

@@ -0,0 +1 @@
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema, } from './DSCircularIndeterminateIndicator';

package/types/v2/react-desc-prop-types.d.ts

@@ -0,0 +1,32 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+export declare namespace DSCircularIndeterminateIndicatorT {
+    interface Props {
+        size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+        color?: 'light' | 'dark';
+        text?: string;
+        showText?: boolean;
+        withTooltip: boolean;
+        tooltipStartPlacementPreference?: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+        __duration: number;
+    }
+}
+export declare const CircularIndeterminateIndicatorPropTypes: {
+    size: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    color: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    text: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    showText: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    withTooltip: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    tooltipStartPlacementPreference: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+};