@elliemae/ds-circular-progress-indicator 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/DSCircularProgressIndicator.js

@@ -0,0 +1,268 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DSTooltip = require('@elliemae/ds-tooltip');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
+
+var _path, _path2;
+const {
+  classNameBlock,
+  classNameElement
+} = dsClassnames.convertPropToCssClassName('circular-progress-indicator');
+
+const CircularProgressIndicator = _ref => {
+  let {
+    size,
+    showLabel,
+    showTooltip,
+    waiting,
+    loading
+  } = _ref;
+  const waitingLabel = 'Waiting...';
+  const loadingLabel = 'Loading...';
+  const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;
+  let sizePx;
+  let sizeLabel;
+  let strokeWidth;
+  let trackWidth;
+  let markerHeight = '0.7';
+  let markerRefY = '4.8';
+  let grayArcStrokeDasharray = '45 170';
+  let grayArcStrokeDashoffset = '127.5';
+
+  switch (size.toUpperCase()) {
+    case 'XS':
+      sizePx = 8;
+      sizeLabel = 12;
+      strokeWidth = 10;
+      trackWidth = 3;
+      markerHeight = '1';
+      grayArcStrokeDasharray = '46 174';
+      grayArcStrokeDashoffset = '133';
+      break;
+
+    case 'S':
+      sizePx = 16;
+      sizeLabel = 12;
+      strokeWidth = 8;
+      trackWidth = 3;
+      markerHeight = '1';
+      grayArcStrokeDasharray = '46 174';
+      grayArcStrokeDashoffset = '133';
+      break;
+
+    case 'M':
+      sizePx = 24;
+      sizeLabel = 12;
+      strokeWidth = 7;
+      trackWidth = 3;
+      markerHeight = '1';
+      markerRefY = '5.5';
+      grayArcStrokeDasharray = '46 174';
+      grayArcStrokeDashoffset = '133';
+      break;
+
+    case 'L':
+      sizePx = 32;
+      sizeLabel = 13;
+      strokeWidth = 6;
+      trackWidth = 3;
+      markerRefY = '5';
+      break;
+
+    case 'XL':
+      sizePx = 48;
+      sizeLabel = 14;
+      strokeWidth = 5;
+      trackWidth = 1;
+      break;
+
+    case 'XXL':
+      sizePx = 56;
+      sizeLabel = 16;
+      strokeWidth = 4;
+      trackWidth = 1;
+      break;
+
+    case 'XXXL':
+      sizePx = 64;
+      sizeLabel = 16;
+      strokeWidth = 5;
+      trackWidth = 2;
+      break;
+  }
+
+  const labelText = /*#__PURE__*/_jsx__default["default"]("p", {
+    "data-testid": "circular-indicator-label",
+    className: classNameElement('label'),
+    style: {
+      fontSize: "".concat(sizeLabel, "px")
+    }
+  }, void 0, currentLabel); // Only adds the tooltip if sizePx < 17 or showTooltip is true
+
+
+  const buildIndicator = Component => sizePx < 17 || showTooltip ? /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
+    containerProps: {
+      id: 'ds-circular-progress-indicator',
+      'data-testid': 'circular-indicator-title'
+    },
+    interactionType: "hover",
+    title: currentLabel,
+    triggerComponent: Component,
+    placement: "bottom"
+  }) : Component;
+
+  const grayTrack = /*#__PURE__*/_jsx__default["default"]("circle", {
+    className: classNameElement('track'),
+    cx: "50%",
+    cy: "50%",
+    fill: "none",
+    r: "28",
+    strokeWidth: "".concat(trackWidth, "px")
+  });
+
+  const grayArc = /*#__PURE__*/_jsx__default["default"]("circle", {
+    className: classNameElement('arc-gray'),
+    stroke: "#E0E3E8",
+    strokeDasharray: "".concat(grayArcStrokeDasharray),
+    strokeDashoffset: "".concat(grayArcStrokeDashoffset),
+    cx: "50%",
+    cy: "50%",
+    fill: "none",
+    r: "28",
+    strokeWidth: "".concat(trackWidth, "px")
+  });
+
+  const indicator = /*#__PURE__*/_jsx__default["default"]("svg", {
+    height: "".concat(sizePx, "px"),
+    version: "1.1",
+    viewBox: "0 0 66 66",
+    width: "".concat(sizePx, "px"),
+    "data-testid": "circular-indicator"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("linearGradient", {
+    id: "grad1",
+    x1: "0%",
+    x2: "100%",
+    y1: "100%",
+    y2: "0%"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
+    offset: "0%",
+    style: {
+      stopColor: '#E0E3E8',
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_jsx__default["default"]("stop", {
+    offset: "89%",
+    style: {
+      stopColor: '#5594e2',
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_jsx__default["default"]("stop", {
+    offset: "100%",
+    style: {
+      stopColor: '#5594e2',
+      stopOpacity: 1
+    }
+  })), /*#__PURE__*/_jsx__default["default"]("linearGradient", {
+    id: "grad2",
+    x1: "0%",
+    x2: "100%",
+    y1: "100%",
+    y2: "0%"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
+    offset: "0%",
+    style: {
+      stopColor: '#5594e2',
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_jsx__default["default"]("stop", {
+    offset: "11%",
+    style: {
+      stopColor: '#5594e2',
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_jsx__default["default"]("stop", {
+    offset: "100%",
+    style: {
+      stopColor: '#E0E3E8',
+      stopOpacity: 1
+    }
+  })), /*#__PURE__*/_jsx__default["default"]("marker", {
+    id: "inverseL",
+    viewBox: "0 0 5 10",
+    refX: "0.5",
+    refY: "".concat(markerRefY),
+    markerUnits: "strokeWidth",
+    markerWidth: "0.5",
+    markerHeight: "".concat(markerHeight),
+    orient: "auto"
+  }, void 0, _path || (_path = /*#__PURE__*/_jsx__default["default"]("path", {
+    d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
+    fill: "#FFF"
+  }))), /*#__PURE__*/_jsx__default["default"]("marker", {
+    id: "inverseR",
+    viewBox: "0 0 5 10",
+    refX: "0",
+    refY: "5",
+    markerUnits: "strokeWidth",
+    markerWidth: "0.7",
+    markerHeight: "".concat(markerHeight)
+  }, void 0, _path2 || (_path2 = /*#__PURE__*/_jsx__default["default"]("path", {
+    d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
+    fill: "#FFF"
+  })))), grayTrack, !waiting && /*#__PURE__*/_jsx__default["default"]("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: classNameElement('arc-blue'),
+    d: "M30,5 C17.536025,6 6,17.536027 5,31",
+    stroke: "#5594e2",
+    strokeWidth: "".concat(strokeWidth - 0.5, "px"),
+    strokeLinecap: "round",
+    "data-testid": "circular-indicator-blue-arc"
+  }), /*#__PURE__*/_jsx__default["default"]("path", {
+    className: classNameElement('arc-white'),
+    d: "M33,5 C17.536027,5 5,17.536027 5,33",
+    stroke: "#FFF",
+    strokeWidth: "".concat(strokeWidth + 2, "px"),
+    markerStart: "url(#inverseR)",
+    markerEnd: "url(#inverseL)"
+  }), grayArc));
+
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: classNameBlock('wrapper'),
+    role: "status",
+    "aria-hidden": waiting || loading ? 'false' : 'true'
+  }, void 0, buildIndicator(indicator), showLabel && labelText);
+};
+
+CircularProgressIndicator.defaultProps = {
+  size: 'm',
+  showLabel: false,
+  showTooltip: false,
+  waiting: false,
+  loading: false
+};
+const circularProgressIndicatorProps = {
+  size: reactDesc.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']).description('Defines the size of the indicator').defaultValue('m'),
+  showLabel: reactDesc.PropTypes.bool.description('Wheter the indicator displays its state on a label or not').defaultValue(false),
+  showTooltip: reactDesc.PropTypes.bool.description('Wheter the indicator displays its state on a tooltip or not').defaultValue(false),
+  waiting: reactDesc.PropTypes.bool.description('Defines the state of the indicator as Waiting and only displays the gray track').defaultValue(false),
+  loading: reactDesc.PropTypes.bool.description('Defines the state of the indicator as Loading and displays a blue spinner animation').defaultValue(false)
+};
+const CircularProgressIndicatorWithSchema = reactDesc.describe(CircularProgressIndicator);
+CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
+
+exports.CircularProgressIndicatorWithSchema = CircularProgressIndicatorWithSchema;
+exports["default"] = CircularProgressIndicator;

package/cjs/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+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;