@elliemae/ds-circular-progress-indicator 2.2.1 → 2.2.3-next.0

package/cjs/index.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DSCircularProgressIndicator = require('./DSCircularProgressIndicator.js');
+var DSCircularIndeterminateIndicator = require('./v2/DSCircularIndeterminateIndicator.js');
 
 
 
 exports.CircularProgressIndicatorWithSchema = DSCircularProgressIndicator.CircularProgressIndicatorWithSchema;
 exports.DSCircularProgressIndicator = DSCircularProgressIndicator["default"];
 exports["default"] = DSCircularProgressIndicator["default"];
+exports.DSCircularIndeterminateIndicator = DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicator;
+exports.DSCircularIndeterminateIndicatorWithSchema = DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicatorWithSchema;

package/cjs/v2/DSCircularIndeterminateIndicator.js

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+require('react');
+var dsGrid = require('@elliemae/ds-grid');
+var DSTooltip = require('@elliemae/ds-tooltip');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var uid = require('uid');
+var reactDescPropTypes = require('./react-desc-prop-types.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2, _circle;
+const r = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["to { transform: rotate(2turn) }"])));
+const s = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["0%, 39% { stroke-dasharray: 942px 2826px }"])));
+const StyledSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
+  componentId: "sc-3syz25-0"
+})(["#gg{transform:rotate(45deg);stroke:url(#", ");mask:url(#", ");}mask use{stroke:#fff;stroke-linecap:round;stroke-dasharray:942px 2826px;animation:", " ", "s cubic-bezier(0.5,-0.43,0.5,1.43) infinite,", " ", "s ease-in-out infinite alternate;}"], props => props.linearGradientUid, props => props.maskUid, r, props => props.duration, s, props => props.duration / 2);
+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 = _ref => {
+  let {
+    size = 'm',
+    color = 'dark',
+    text = '',
+    showText = true,
+    withTooltip = false,
+    tooltipStartPlacementPreference = 'bottom',
+    __duration = 1.5
+  } = _ref;
+  const Wrapper = withTooltip ? DSTooltip.DSTooltipV3 : _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: children
+    });
+  };
+  const linearGradientUid = uid.uid(16);
+  const maskUid = uid.uid(16);
+  const circleUid = uid.uid(16);
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    gutter: "xs",
+    justifyContent: "center",
+    role: "status"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Wrapper, {
+    text: text,
+    textAlign: "center",
+    startPlacementPreference: tooltipStartPlacementPreference
+  }, void 0, /*#__PURE__*/_jsx__default["default"](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: linearGradientUid,
+    maskUid: maskUid,
+    duration: __duration
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
+    transform: "scale(2.298)"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("linearGradient", {
+    id: linearGradientUid
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
+    stopColor: color === 'dark' ? '#48a3ff' : '#ccd6ff'
+  }), /*#__PURE__*/_jsx__default["default"]("stop", {
+    stopColor: color === 'dark' ? '#49d0ff' : '#ebf6ff',
+    offset: "1"
+  })), /*#__PURE__*/_jsx__default["default"]("mask", {
+    id: maskUid
+  }, void 0, _circle || (_circle = /*#__PURE__*/_jsx__default["default"]("circle", {
+    r: "1200",
+    fill: "#000"
+  })), /*#__PURE__*/_jsx__default["default"]("use", {
+    xlinkHref: "#".concat(circleUid)
+  })), /*#__PURE__*/_jsx__default["default"]("circle", {
+    id: circleUid,
+    r: "600"
+  }), /*#__PURE__*/_jsx__default["default"]("g", {
+    id: "gg"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("use", {
+    xlinkHref: "#".concat(circleUid)
+  })))), text !== '' && showText && /*#__PURE__*/_jsx__default["default"]("span", {
+    style: {
+      color: colorToHex[color],
+      fontSize: sizeToTextSize[size]
+    }
+  }, void 0, text)));
+};
+const DSCircularIndeterminateIndicatorWithSchema = reactDesc.describe(DSCircularIndeterminateIndicator);
+DSCircularIndeterminateIndicatorWithSchema.propTypes = reactDescPropTypes.CircularIndeterminateIndicatorPropTypes;
+
+exports.DSCircularIndeterminateIndicator = DSCircularIndeterminateIndicator;
+exports.DSCircularIndeterminateIndicatorWithSchema = DSCircularIndeterminateIndicatorWithSchema;

package/cjs/v2/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSCircularIndeterminateIndicator = require('./DSCircularIndeterminateIndicator.js');
+
+
+
+exports.DSCircularIndeterminateIndicator = DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicator;
+exports.DSCircularIndeterminateIndicatorWithSchema = DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicatorWithSchema;

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+/* eslint-disable max-lines */
+const CircularIndeterminateIndicatorPropTypes = {
+  size: reactDesc.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
+  color: reactDesc.PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
+  text: reactDesc.PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
+  showText: reactDesc.PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
+  withTooltip: reactDesc.PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
+  tooltipStartPlacementPreference: reactDesc.PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preference for the tooltip').defaultValue('center')
+};
+
+exports.CircularIndeterminateIndicatorPropTypes = CircularIndeterminateIndicatorPropTypes;

package/esm/index.js

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

package/esm/v2/DSCircularIndeterminateIndicator.js

@@ -0,0 +1,123 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import '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.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var _templateObject, _templateObject2, _circle;
+const r = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["to { transform: rotate(2turn) }"])));
+const s = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["0%, 39% { stroke-dasharray: 942px 2826px }"])));
+const StyledSvg = /*#__PURE__*/styled.svg.withConfig({
+  componentId: "sc-3syz25-0"
+})(["#gg{transform:rotate(45deg);stroke:url(#", ");mask:url(#", ");}mask use{stroke:#fff;stroke-linecap:round;stroke-dasharray:942px 2826px;animation:", " ", "s cubic-bezier(0.5,-0.43,0.5,1.43) infinite,", " ", "s ease-in-out infinite alternate;}"], props => props.linearGradientUid, props => props.maskUid, r, props => props.duration, s, props => props.duration / 2);
+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 = _ref => {
+  let {
+    size = 'm',
+    color = 'dark',
+    text = '',
+    showText = true,
+    withTooltip = false,
+    tooltipStartPlacementPreference = 'bottom',
+    __duration = 1.5
+  } = _ref;
+  const Wrapper = withTooltip ? DSTooltipV3 : _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  };
+  const linearGradientUid = uid(16);
+  const maskUid = uid(16);
+  const circleUid = uid(16);
+  return /*#__PURE__*/_jsx(Grid, {
+    gutter: "xs",
+    justifyContent: "center",
+    role: "status"
+  }, void 0, /*#__PURE__*/_jsx(Wrapper, {
+    text: text,
+    textAlign: "center",
+    startPlacementPreference: tooltipStartPlacementPreference
+  }, void 0, /*#__PURE__*/_jsx(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: linearGradientUid,
+    maskUid: maskUid,
+    duration: __duration
+  }, void 0, /*#__PURE__*/_jsx("g", {
+    transform: "scale(2.298)"
+  }, void 0, /*#__PURE__*/_jsx("linearGradient", {
+    id: linearGradientUid
+  }, void 0, /*#__PURE__*/_jsx("stop", {
+    stopColor: color === 'dark' ? '#48a3ff' : '#ccd6ff'
+  }), /*#__PURE__*/_jsx("stop", {
+    stopColor: color === 'dark' ? '#49d0ff' : '#ebf6ff',
+    offset: "1"
+  })), /*#__PURE__*/_jsx("mask", {
+    id: maskUid
+  }, void 0, _circle || (_circle = /*#__PURE__*/_jsx("circle", {
+    r: "1200",
+    fill: "#000"
+  })), /*#__PURE__*/_jsx("use", {
+    xlinkHref: "#".concat(circleUid)
+  })), /*#__PURE__*/_jsx("circle", {
+    id: circleUid,
+    r: "600"
+  }), /*#__PURE__*/_jsx("g", {
+    id: "gg"
+  }, void 0, /*#__PURE__*/_jsx("use", {
+    xlinkHref: "#".concat(circleUid)
+  })))), text !== '' && showText && /*#__PURE__*/_jsx("span", {
+    style: {
+      color: colorToHex[color],
+      fontSize: sizeToTextSize[size]
+    }
+  }, void 0, text)));
+};
+const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);
+DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;
+
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema };

package/esm/v2/index.js

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

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

@@ -0,0 +1,13 @@
+import { PropTypes } from 'react-desc';
+
+/* eslint-disable max-lines */
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-circular-progress-indicator",
-  "version": "2.2.1",
+  "version": "2.2.3-next.0",
   "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.1",
-    "@elliemae/ds-tooltip": "2.2.1",
+    "@elliemae/ds-classnames": "2.2.3-next.0",
+    "@elliemae/ds-tooltip": "2.2.3-next.0",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {

package/types/index.d.ts

@@ -1 +1,2 @@
 export { default, default as DSCircularProgressIndicator, CircularProgressIndicatorWithSchema, } from './DSCircularProgressIndicator';
+export * 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 * 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;
+    };
+};