@elliemae/ds-square-indicator 2.2.0-next.4

package/cjs/DSSquareIndicator.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsGrid = require('@elliemae/ds-grid');
+var dsTooltip = require('@elliemae/ds-tooltip');
+var reactDesc = require('react-desc');
+var reactDescPropTypes = require('./react-desc-prop-types.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _animate;
+const sizeToPx = {
+  xs: '16px',
+  s: '24px',
+  m: '32px',
+  l: '48px',
+  xl: '56px',
+  xxl: '64px'
+};
+const sizeToWeight = {
+  xs: '3px',
+  s: '3px',
+  m: '3px',
+  l: '4px',
+  xl: '5px',
+  xxl: '6px'
+};
+const colorToHex = {
+  light: '#FFFFFF',
+  dark: '#0F364A'
+};
+const sizeToTextSize = {
+  xs: '12px',
+  s: '12px',
+  m: '12px',
+  l: '13px',
+  xl: '14px',
+  xxl: '16px'
+};
+const DSSquareIndicator = _ref => {
+  let {
+    size = 'm',
+    color = 'dark',
+    text = '',
+    showText = true,
+    withTooltip = false,
+    tooltipStartPlacementPreference = 'bottom'
+  } = _ref;
+  const Wrapper = withTooltip ? dsTooltip.DSTooltipV3 : React__default["default"].Fragment;
+  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"]("svg", {
+    width: sizeToPx[size],
+    height: sizeToPx[size],
+    style: {
+      display: 'block',
+      margin: 'auto'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "transparent",
+    strokeWidth: sizeToWeight[size],
+    strokeDasharray: "400% 400%",
+    stroke: colorToHex[color]
+  }, void 0, _animate || (_animate = /*#__PURE__*/_jsx__default["default"]("animate", {
+    attributeName: "stroke-dashoffset",
+    values: "800%;0",
+    keyTimes: "0;1",
+    dur: "2.5s",
+    repeatCount: "indefinite",
+    restart: "always"
+  })))), text !== '' && showText && /*#__PURE__*/_jsx__default["default"]("span", {
+    style: {
+      color: colorToHex[color],
+      fontSize: sizeToTextSize[size]
+    }
+  }, void 0, text)));
+};
+const DSSquareIndicatorWithSchema = reactDesc.describe(DSSquareIndicator);
+DSSquareIndicatorWithSchema.propTypes = reactDescPropTypes.SquareIndicatorPropTypes;
+
+exports.DSSquareIndicator = DSSquareIndicator;
+exports.DSSquareIndicatorWithSchema = DSSquareIndicatorWithSchema;

package/cjs/index.js

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

package/cjs/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 SquareIndicatorPropTypes = {
+  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.SquareIndicatorPropTypes = SquareIndicatorPropTypes;

package/esm/DSSquareIndicator.js

@@ -0,0 +1,86 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSTooltipV3 } from '@elliemae/ds-tooltip';
+import { describe } from 'react-desc';
+import { SquareIndicatorPropTypes } from './react-desc-prop-types.js';
+
+var _animate;
+const sizeToPx = {
+  xs: '16px',
+  s: '24px',
+  m: '32px',
+  l: '48px',
+  xl: '56px',
+  xxl: '64px'
+};
+const sizeToWeight = {
+  xs: '3px',
+  s: '3px',
+  m: '3px',
+  l: '4px',
+  xl: '5px',
+  xxl: '6px'
+};
+const colorToHex = {
+  light: '#FFFFFF',
+  dark: '#0F364A'
+};
+const sizeToTextSize = {
+  xs: '12px',
+  s: '12px',
+  m: '12px',
+  l: '13px',
+  xl: '14px',
+  xxl: '16px'
+};
+const DSSquareIndicator = _ref => {
+  let {
+    size = 'm',
+    color = 'dark',
+    text = '',
+    showText = true,
+    withTooltip = false,
+    tooltipStartPlacementPreference = 'bottom'
+  } = _ref;
+  const Wrapper = withTooltip ? DSTooltipV3 : React.Fragment;
+  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("svg", {
+    width: sizeToPx[size],
+    height: sizeToPx[size],
+    style: {
+      display: 'block',
+      margin: 'auto'
+    }
+  }, void 0, /*#__PURE__*/_jsx("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "transparent",
+    strokeWidth: sizeToWeight[size],
+    strokeDasharray: "400% 400%",
+    stroke: colorToHex[color]
+  }, void 0, _animate || (_animate = /*#__PURE__*/_jsx("animate", {
+    attributeName: "stroke-dashoffset",
+    values: "800%;0",
+    keyTimes: "0;1",
+    dur: "2.5s",
+    repeatCount: "indefinite",
+    restart: "always"
+  })))), text !== '' && showText && /*#__PURE__*/_jsx("span", {
+    style: {
+      color: colorToHex[color],
+      fontSize: sizeToTextSize[size]
+    }
+  }, void 0, text)));
+};
+const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);
+DSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;
+
+export { DSSquareIndicator, DSSquareIndicatorWithSchema };

package/esm/index.js

@@ -0,0 +1 @@
+export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';

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

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

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@elliemae/ds-square-indicator",
+  "version": "2.2.0-next.4",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./react-desc-prop-types": {
+      "import": "./esm/react-desc-prop-types.js",
+      "require": "./cjs/react-desc-prop-types.js"
+    },
+    "./DSSquareIndicator": {
+      "import": "./esm/DSSquareIndicator.js",
+      "require": "./cjs/DSSquareIndicator.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "npm": ">=7",
+    "node": ">=14"
+  },
+  "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
+  "dependencies": {
+    "@elliemae/ds-grid": "2.2.0-next.1",
+    "react-desc": "~4.1.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist",
+    "generateSubmodules": true
+  }
+}

package/types/DSSquareIndicator.d.ts

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

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from './DSSquareIndicator';

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

@@ -0,0 +1,31 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+export declare namespace DSSquareIndicatorT {
+    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';
+    }
+}
+export declare const SquareIndicatorPropTypes: {
+    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;
+    };
+};