@elliemae/ds-circular-progress-indicator 3.0.0-next.2 → 3.0.0-next.3

package/esm/DSCircularProgressIndicator.js

@@ -1,258 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import DSTooltip from '@elliemae/ds-tooltip';
-
-var _path, _path2;
-const {
-  classNameBlock,
-  classNameElement
-} = 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("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(DSTooltip, {
-    containerProps: {
-      id: 'ds-circular-progress-indicator',
-      'data-testid': 'circular-indicator-title'
-    },
-    interactionType: "hover",
-    title: currentLabel,
-    triggerComponent: Component,
-    placement: "bottom"
-  }) : Component;
-
-  const grayTrack = /*#__PURE__*/_jsx("circle", {
-    className: classNameElement('track'),
-    cx: "50%",
-    cy: "50%",
-    fill: "none",
-    r: "28",
-    strokeWidth: "".concat(trackWidth, "px")
-  });
-
-  const grayArc = /*#__PURE__*/_jsx("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("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("defs", {}, void 0, /*#__PURE__*/_jsx("linearGradient", {
-    id: "grad1",
-    x1: "0%",
-    x2: "100%",
-    y1: "100%",
-    y2: "0%"
-  }, void 0, /*#__PURE__*/_jsx("stop", {
-    offset: "0%",
-    style: {
-      stopColor: '#E0E3E8',
-      stopOpacity: 1
-    }
-  }), /*#__PURE__*/_jsx("stop", {
-    offset: "89%",
-    style: {
-      stopColor: '#5594e2',
-      stopOpacity: 1
-    }
-  }), /*#__PURE__*/_jsx("stop", {
-    offset: "100%",
-    style: {
-      stopColor: '#5594e2',
-      stopOpacity: 1
-    }
-  })), /*#__PURE__*/_jsx("linearGradient", {
-    id: "grad2",
-    x1: "0%",
-    x2: "100%",
-    y1: "100%",
-    y2: "0%"
-  }, void 0, /*#__PURE__*/_jsx("stop", {
-    offset: "0%",
-    style: {
-      stopColor: '#5594e2',
-      stopOpacity: 1
-    }
-  }), /*#__PURE__*/_jsx("stop", {
-    offset: "11%",
-    style: {
-      stopColor: '#5594e2',
-      stopOpacity: 1
-    }
-  }), /*#__PURE__*/_jsx("stop", {
-    offset: "100%",
-    style: {
-      stopColor: '#E0E3E8',
-      stopOpacity: 1
-    }
-  })), /*#__PURE__*/_jsx("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("path", {
-    d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
-    fill: "#FFF"
-  }))), /*#__PURE__*/_jsx("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("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("g", {
-    fill: "none",
-    fillRule: "evenodd",
-    stroke: "none",
-    strokeWidth: "1"
-  }, void 0, /*#__PURE__*/_jsx("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("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("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: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']).description('Defines the size of the indicator').defaultValue('m'),
-  showLabel: PropTypes.bool.description('Wheter the indicator displays its state on a label or not').defaultValue(false),
-  showTooltip: PropTypes.bool.description('Wheter the indicator displays its state on a tooltip or not').defaultValue(false),
-  waiting: PropTypes.bool.description('Defines the state of the indicator as Waiting and only displays the gray track').defaultValue(false),
-  loading: PropTypes.bool.description('Defines the state of the indicator as Loading and displays a blue spinner animation').defaultValue(false)
-};
-const CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);
-CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
-
-export { CircularProgressIndicatorWithSchema, CircularProgressIndicator as default };

package/esm/index.js

@@ -1 +0,0 @@
-export { CircularProgressIndicatorWithSchema, default as DSCircularProgressIndicator, default } from './DSCircularProgressIndicator.js';

package/types/DSCircularProgressIndicator.d.ts

@@ -1,48 +0,0 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-/// <reference types="react" />
-declare const CircularProgressIndicator: {
-    ({ size, showLabel, showTooltip, waiting, loading }: {
-        size: any;
-        showLabel: any;
-        showTooltip: any;
-        waiting: any;
-        loading: any;
-    }): JSX.Element;
-    defaultProps: {
-        size: string;
-        showLabel: boolean;
-        showTooltip: boolean;
-        waiting: boolean;
-        loading: boolean;
-    };
-    propTypes: {
-        size: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        showLabel: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        showTooltip: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        waiting: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        loading: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-    };
-};
-declare const CircularProgressIndicatorWithSchema: {
-    (props?: {
-        size: any;
-        showLabel: any;
-        showTooltip: any;
-        waiting: any;
-        loading: any;
-    } | undefined): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
-export { CircularProgressIndicatorWithSchema };
-export default CircularProgressIndicator;

package/types/index.d.ts

@@ -1 +0,0 @@
-export { default, default as DSCircularProgressIndicator, CircularProgressIndicatorWithSchema, } from './DSCircularProgressIndicator';

package/types/tests/DSCircularProgressIndicator.test.d.ts

@@ -1 +0,0 @@
-export {};