@sis-cc/dotstatsuite-visions 7.12.2 → 7.13.0

package/es/Loading/Loading.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import * as R from 'ramda';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
@@ -19,13 +20,12 @@ var useStyles = makeStyles(function (theme) {
       height: ' 48px',
       borderStyle: 'solid',
       borderWidth: '5px',
-      borderColor: theme.palette.primary.main,
-      borderBottomColor: 'transparent',
       borderRadius: '50%',
       display: 'inline-block',
       boxSizing: 'border-box',
       animation: '$rotate 1s linear infinite',
-      margin: theme.spacing(2)
+      margin: theme.spacing(2),
+      borderBottomColor: 'transparent !important'
     },
     '@keyframes rotate': {
       '0%': {
@@ -36,8 +36,13 @@ var useStyles = makeStyles(function (theme) {
       }
     },
     warning: {
-      borderColor: theme.palette.warning.main,
-      borderBottomColor: 'transparent'
+      borderColor: theme.palette.warning.main
+    },
+    primaryColor: {
+      borderColor: theme.palette.primary.main
+    },
+    secondaryColor: {
+      borderColor: theme.palette.secondary.main
     }
   };
 });
@@ -47,14 +52,20 @@ var Loading = function Loading(_ref) {
 
   var message = _ref.message,
       _ref$isWarning = _ref.isWarning,
-      isWarning = _ref$isWarning === undefined ? false : _ref$isWarning;
+      isWarning = _ref$isWarning === undefined ? false : _ref$isWarning,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === undefined ? 'primary' : _ref$variant,
+      color = _ref.color;
 
   var classes = useStyles();
 
   return React.createElement(
     'div',
     { className: classes.root },
-    React.createElement('div', { className: cx(classes.circularProgress, (_cx = {}, _cx[classes.warning] = isWarning, _cx)) }),
+    React.createElement('div', {
+      style: { color: R.isNil(color) ? undefined : color },
+      className: cx(classes.circularProgress, (_cx = {}, _cx[classes[variant + 'Color']] = !R.isNil(variant) && R.isNil(color) && !isWarning, _cx[classes.warning] = isWarning, _cx))
+    }),
     React.createElement(
       Typography,
       { variant: 'subtitle1', noWrap: true, align: 'center' },
@@ -65,6 +76,8 @@ var Loading = function Loading(_ref) {
 
 Loading.propTypes = process.env.NODE_ENV !== "production" ? {
   message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  variant: PropTypes.string,
+  color: PropTypes.string,
   isWarning: PropTypes.bool
 } : {};
 

package/es/Loading/index.js

@@ -1,14 +1,24 @@
 /**
  * Loading component is a basic placeholder to use when retrieving things.
+ * There are four way to use it: 
+ * 1. Loading with message
+ * 2. Loading with message and variant (primary|secondary) (default: primary) 
+ * 3. Loading with message and color (second priority color)
+ * 4. Loading with warning (top priority color)
+ * 
  *
  * @memberOf VISIONS
  * @name Loading
  * @tag component
  * @api public
  * @props
- * message: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
- * @theme
- * // no custom theme there
+ * Loading.propTypes = {
+ *   message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   variant: PropTypes.string,
+ *   color: PropTypes.string,
+ *   isWarning: PropTypes.bool,
+ * };
+
  */
 
 export { default } from './Loading';

package/lib/Loading/Loading.js

@@ -6,6 +6,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -20,6 +24,8 @@ var _Typography = require('@material-ui/core/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var useStyles = (0, _styles.makeStyles)(function (theme) {
@@ -37,13 +43,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       height: ' 48px',
       borderStyle: 'solid',
       borderWidth: '5px',
-      borderColor: theme.palette.primary.main,
-      borderBottomColor: 'transparent',
       borderRadius: '50%',
       display: 'inline-block',
       boxSizing: 'border-box',
       animation: '$rotate 1s linear infinite',
-      margin: theme.spacing(2)
+      margin: theme.spacing(2),
+      borderBottomColor: 'transparent !important'
     },
     '@keyframes rotate': {
       '0%': {
@@ -54,8 +59,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       }
     },
     warning: {
-      borderColor: theme.palette.warning.main,
-      borderBottomColor: 'transparent'
+      borderColor: theme.palette.warning.main
+    },
+    primaryColor: {
+      borderColor: theme.palette.primary.main
+    },
+    secondaryColor: {
+      borderColor: theme.palette.secondary.main
     }
   };
 });
@@ -65,14 +75,20 @@ var Loading = function Loading(_ref) {
 
   var message = _ref.message,
       _ref$isWarning = _ref.isWarning,
-      isWarning = _ref$isWarning === undefined ? false : _ref$isWarning;
+      isWarning = _ref$isWarning === undefined ? false : _ref$isWarning,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === undefined ? 'primary' : _ref$variant,
+      color = _ref.color;
 
   var classes = useStyles();
 
   return _react2.default.createElement(
     'div',
     { className: classes.root },
-    _react2.default.createElement('div', { className: (0, _classnames2.default)(classes.circularProgress, (_cx = {}, _cx[classes.warning] = isWarning, _cx)) }),
+    _react2.default.createElement('div', {
+      style: { color: R.isNil(color) ? undefined : color },
+      className: (0, _classnames2.default)(classes.circularProgress, (_cx = {}, _cx[classes[variant + 'Color']] = !R.isNil(variant) && R.isNil(color) && !isWarning, _cx[classes.warning] = isWarning, _cx))
+    }),
     _react2.default.createElement(
       _Typography2.default,
       { variant: 'subtitle1', noWrap: true, align: 'center' },
@@ -83,6 +99,8 @@ var Loading = function Loading(_ref) {
 
 Loading.propTypes = process.env.NODE_ENV !== "production" ? {
   message: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  variant: _propTypes2.default.string,
+  color: _propTypes2.default.string,
   isWarning: _propTypes2.default.bool
 } : {};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.12.2",
+  "version": "7.13.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",