@dhis2-ui/loader 8.1.10 → 8.2.1

package/build/cjs/circular-loader/circular-loader.js

@@ -17,26 +17,29 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const CircularLoader = ({
-  small,
-  large,
-  extrasmall,
-  invert,
-  className,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  role: "progressbar",
-  "data-test": dataTest,
-  className: _style.default.dynamic([["3803726117", [_uiConstants.colors.blue600, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)(className, {
+const CircularLoader = _ref => {
+  let {
     small,
     large,
     extrasmall,
-    invert
-  }) || "")
-}, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3803726117",
-  dynamic: [_uiConstants.colors.blue600, _uiConstants.colors.white]
-}, [`div.__jsx-style-dynamic-selector{width:48px;height:48px;border:6px solid rgba(110,122,138,0.15);border-bottom-color:${_uiConstants.colors.blue600};border-radius:50%;-webkit-animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;}`, "@-webkit-keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", ".small.__jsx-style-dynamic-selector{width:24px;height:24px;border-width:4px;}", ".large.__jsx-style-dynamic-selector{width:72px;height:72px;border-width:8px;}", ".extrasmall.__jsx-style-dynamic-selector{width:16px;height:16px;border-width:2px;}", `.invert.__jsx-style-dynamic-selector{border-color:rgba(33,41,52,0.5);border-bottom-color:${_uiConstants.colors.white};}`]));
+    invert,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: "progressbar",
+    "data-test": dataTest,
+    className: _style.default.dynamic([["3803726117", [_uiConstants.colors.blue600, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)(className, {
+      small,
+      large,
+      extrasmall,
+      invert
+    }) || "")
+  }, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3803726117",
+    dynamic: [_uiConstants.colors.blue600, _uiConstants.colors.white]
+  }, ["div.__jsx-style-dynamic-selector{width:48px;height:48px;border:6px solid rgba(110,122,138,0.15);border-bottom-color:".concat(_uiConstants.colors.blue600, ";border-radius:50%;-webkit-animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;}"), "@-webkit-keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", ".small.__jsx-style-dynamic-selector{width:24px;height:24px;border-width:4px;}", ".large.__jsx-style-dynamic-selector{width:72px;height:72px;border-width:8px;}", ".extrasmall.__jsx-style-dynamic-selector{width:16px;height:16px;border-width:2px;}", ".invert.__jsx-style-dynamic-selector{border-color:rgba(33,41,52,0.5);border-bottom-color:".concat(_uiConstants.colors.white, ";}")]));
+};
 
 exports.CircularLoader = CircularLoader;
 CircularLoader.defaultProps = {

package/build/cjs/circular-loader/circular-loader.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExtraSmall = exports.Large = exports.Small = exports.Default = exports.default = void 0;
+exports.default = exports.Small = exports.Large = exports.ExtraSmall = exports.Default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -13,18 +13,10 @@ var _index = require("./index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const subtitle = `Used to inform the user that an element or page is in a loading state`;
-const description = `
-Use loading indicators whenever a component or application takes longer than 700ms to load. After this time a loader should be displayed so that the user can understand what is happening: loading is in progress. Consider that without a loading indicator a user would be unsure of their current status, so they are important UI elements.
-
-A circular loader is used when the loading time is uncertain and cannot be displayed as a percentage. A circular loader can spin many times, and each spin does not represent any amount of completion.
-
-\`\`\`js
-import { CircularLoader } from '@dhis2/ui'
-\`\`\`
-`;
+const subtitle = "Used to inform the user that an element or page is in a loading state";
+const description = "\nUse loading indicators whenever a component or application takes longer than 700ms to load. After this time a loader should be displayed so that the user can understand what is happening: loading is in progress. Consider that without a loading indicator a user would be unsure of their current status, so they are important UI elements.\n\nA circular loader is used when the loading time is uncertain and cannot be displayed as a percentage. A circular loader can spin many times, and each spin does not represent any amount of completion.\n\n```js\nimport { CircularLoader } from '@dhis2/ui'\n```\n";
 var _default = {
-  title: 'Feedback/Loading Indicators/Circular Loader',
+  title: 'Circular Loader',
   component: _index.CircularLoader,
   parameters: {
     componentSubtitle: subtitle,

package/build/cjs/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "LinearLoader", {
+Object.defineProperty(exports, "CircularLoader", {
   enumerable: true,
   get: function () {
-    return _index.LinearLoader;
+    return _index2.CircularLoader;
   }
 });
-Object.defineProperty(exports, "CircularLoader", {
+Object.defineProperty(exports, "LinearLoader", {
   enumerable: true,
   get: function () {
-    return _index2.CircularLoader;
+    return _index.LinearLoader;
   }
 });
 

package/build/cjs/linear-loader/linear-loader.js

@@ -17,11 +17,12 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Progress = ({
-  amount,
-  invert,
-  className
-}) => {
+const Progress = _ref => {
+  let {
+    amount,
+    invert,
+    className
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["686723300", [amount]], ["3392977398", [_uiConstants.theme.primary600, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)(className, {
       invert
@@ -29,10 +30,10 @@ const Progress = ({
   }, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "686723300",
     dynamic: [amount]
-  }, [`div.__jsx-style-dynamic-selector{width:${amount}%;}`]), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, ["div.__jsx-style-dynamic-selector{width:".concat(amount, "%;}")]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3392977398",
     dynamic: [_uiConstants.theme.primary600, _uiConstants.colors.white]
-  }, [`div.__jsx-style-dynamic-selector{background-color:${_uiConstants.theme.primary600};-webkit-transition:width 0.3s linear;transition:width 0.3s linear;height:4px;}`, `.invert.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.white};}`]));
+  }, ["div.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.theme.primary600, ";-webkit-transition:width 0.3s linear;transition:width 0.3s linear;height:4px;}"), ".invert.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.white, ";}")]));
 };
 
 Progress.propTypes = {
@@ -41,14 +42,15 @@ Progress.propTypes = {
   invert: _propTypes.default.bool
 };
 
-const LinearLoader = ({
-  amount,
-  width,
-  margin,
-  invert,
-  className,
-  dataTest
-}) => {
+const LinearLoader = _ref2 => {
+  let {
+    amount,
+    width,
+    margin,
+    invert,
+    className,
+    dataTest
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement("div", {
     role: "progressbar",
     "data-test": dataTest,
@@ -63,7 +65,7 @@ const LinearLoader = ({
   }, ["div.jsx-3127531794{display:block;overflow:hidden;overflow-x:hidden;overflow-y:hidden;background-color:rgba(110,122,138,0.15);}", ".invert.jsx-3127531794{background-color:rgba(33,41,52,0.5);}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3224415970",
     dynamic: [width, margin]
-  }, [`div.__jsx-style-dynamic-selector{width:${width};margin:${margin};}`]));
+  }, ["div.__jsx-style-dynamic-selector{width:".concat(width, ";margin:").concat(margin, ";}")]));
 };
 
 exports.LinearLoader = LinearLoader;

package/build/cjs/linear-loader/linear-loader.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OverlayComponent = exports.OverlayPage = exports.Determinate = exports.default = void 0;
+exports.default = exports.OverlayPage = exports.OverlayComponent = exports.Determinate = void 0;
 
 var _center = require("@dhis2-ui/center");
 
@@ -19,18 +19,10 @@ var _index = require("./index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const subtitle = `Used to inform the user that an element or page is in a loading state`;
-const description = `
-Use loading indicators whenever a component or application takes longer than 700ms to load. After this time a loader should be displayed so that the user can understand what is happening: loading is in progress. Consider that without a loading indicator a user would be unsure of their current status, so they are important UI elements.
-
-A linear loader is used when the loading time is can be measured and displayed as a percentage.
-
-\`\`\`js
-import { LinearLoader } from '@dhis2/ui'
-\`\`\`
-`;
+const subtitle = "Used to inform the user that an element or page is in a loading state";
+const description = "\nUse loading indicators whenever a component or application takes longer than 700ms to load. After this time a loader should be displayed so that the user can understand what is happening: loading is in progress. Consider that without a loading indicator a user would be unsure of their current status, so they are important UI elements.\n\nA linear loader is used when the loading time is can be measured and displayed as a percentage.\n\n```js\nimport { LinearLoader } from '@dhis2/ui'\n```\n";
 var _default = {
-  title: 'Feedback/Loading Indicators/Linear Loader',
+  title: 'Linear Loader',
   component: _index.LinearLoader,
   parameters: {
     componentSubtitle: subtitle,

package/build/es/circular-loader/circular-loader.js

@@ -4,26 +4,29 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const CircularLoader = ({
-  small,
-  large,
-  extrasmall,
-  invert,
-  className,
-  dataTest
-}) => /*#__PURE__*/React.createElement("div", {
-  role: "progressbar",
-  "data-test": dataTest,
-  className: _JSXStyle.dynamic([["3803726117", [colors.blue600, colors.white]]]) + " " + (cx(className, {
+const CircularLoader = _ref => {
+  let {
     small,
     large,
     extrasmall,
-    invert
-  }) || "")
-}, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "3803726117",
-  dynamic: [colors.blue600, colors.white]
-}, [`div.__jsx-style-dynamic-selector{width:48px;height:48px;border:6px solid rgba(110,122,138,0.15);border-bottom-color:${colors.blue600};border-radius:50%;-webkit-animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;}`, "@-webkit-keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", ".small.__jsx-style-dynamic-selector{width:24px;height:24px;border-width:4px;}", ".large.__jsx-style-dynamic-selector{width:72px;height:72px;border-width:8px;}", ".extrasmall.__jsx-style-dynamic-selector{width:16px;height:16px;border-width:2px;}", `.invert.__jsx-style-dynamic-selector{border-color:rgba(33,41,52,0.5);border-bottom-color:${colors.white};}`]));
+    invert,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "progressbar",
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["3803726117", [colors.blue600, colors.white]]]) + " " + (cx(className, {
+      small,
+      large,
+      extrasmall,
+      invert
+    }) || "")
+  }, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3803726117",
+    dynamic: [colors.blue600, colors.white]
+  }, ["div.__jsx-style-dynamic-selector{width:48px;height:48px;border:6px solid rgba(110,122,138,0.15);border-bottom-color:".concat(colors.blue600, ";border-radius:50%;-webkit-animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;}"), "@-webkit-keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", ".small.__jsx-style-dynamic-selector{width:24px;height:24px;border-width:4px;}", ".large.__jsx-style-dynamic-selector{width:72px;height:72px;border-width:8px;}", ".extrasmall.__jsx-style-dynamic-selector{width:16px;height:16px;border-width:2px;}", ".invert.__jsx-style-dynamic-selector{border-color:rgba(33,41,52,0.5);border-bottom-color:".concat(colors.white, ";}")]));
+};
 
 CircularLoader.defaultProps = {
   dataTest: 'dhis2-uicore-circularloader'

package/build/es/circular-loader/circular-loader.stories.js

@@ -1,18 +1,10 @@
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { CircularLoader } from './index.js';
-const subtitle = `Used to inform the user that an element or page is in a loading state`;
-const description = `
-Use loading indicators whenever a component or application takes longer than 700ms to load. After this time a loader should be displayed so that the user can understand what is happening: loading is in progress. Consider that without a loading indicator a user would be unsure of their current status, so they are important UI elements.
-
-A circular loader is used when the loading time is uncertain and cannot be displayed as a percentage. A circular loader can spin many times, and each spin does not represent any amount of completion.
-
-\`\`\`js
-import { CircularLoader } from '@dhis2/ui'
-\`\`\`
-`;
+const subtitle = "Used to inform the user that an element or page is in a loading state";
+const description = "\nUse loading indicators whenever a component or application takes longer than 700ms to load. After this time a loader should be displayed so that the user can understand what is happening: loading is in progress. Consider that without a loading indicator a user would be unsure of their current status, so they are important UI elements.\n\nA circular loader is used when the loading time is uncertain and cannot be displayed as a percentage. A circular loader can spin many times, and each spin does not represent any amount of completion.\n\n```js\nimport { CircularLoader } from '@dhis2/ui'\n```\n";
 export default {
-  title: 'Feedback/Loading Indicators/Circular Loader',
+  title: 'Circular Loader',
   component: CircularLoader,
   parameters: {
     componentSubtitle: subtitle,

package/build/es/linear-loader/linear-loader.js

@@ -4,11 +4,12 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Progress = ({
-  amount,
-  invert,
-  className
-}) => {
+const Progress = _ref => {
+  let {
+    amount,
+    invert,
+    className
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["686723300", [amount]], ["3392977398", [theme.primary600, colors.white]]]) + " " + (cx(className, {
       invert
@@ -16,10 +17,10 @@ const Progress = ({
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "686723300",
     dynamic: [amount]
-  }, [`div.__jsx-style-dynamic-selector{width:${amount}%;}`]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, ["div.__jsx-style-dynamic-selector{width:".concat(amount, "%;}")]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3392977398",
     dynamic: [theme.primary600, colors.white]
-  }, [`div.__jsx-style-dynamic-selector{background-color:${theme.primary600};-webkit-transition:width 0.3s linear;transition:width 0.3s linear;height:4px;}`, `.invert.__jsx-style-dynamic-selector{background-color:${colors.white};}`]));
+  }, ["div.__jsx-style-dynamic-selector{background-color:".concat(theme.primary600, ";-webkit-transition:width 0.3s linear;transition:width 0.3s linear;height:4px;}"), ".invert.__jsx-style-dynamic-selector{background-color:".concat(colors.white, ";}")]));
 };
 
 Progress.propTypes = {
@@ -28,14 +29,15 @@ Progress.propTypes = {
   invert: PropTypes.bool
 };
 
-const LinearLoader = ({
-  amount,
-  width,
-  margin,
-  invert,
-  className,
-  dataTest
-}) => {
+const LinearLoader = _ref2 => {
+  let {
+    amount,
+    width,
+    margin,
+    invert,
+    className,
+    dataTest
+  } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     role: "progressbar",
     "data-test": dataTest,
@@ -50,7 +52,7 @@ const LinearLoader = ({
   }, ["div.jsx-3127531794{display:block;overflow:hidden;overflow-x:hidden;overflow-y:hidden;background-color:rgba(110,122,138,0.15);}", ".invert.jsx-3127531794{background-color:rgba(33,41,52,0.5);}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3224415970",
     dynamic: [width, margin]
-  }, [`div.__jsx-style-dynamic-selector{width:${width};margin:${margin};}`]));
+  }, ["div.__jsx-style-dynamic-selector{width:".concat(width, ";margin:").concat(margin, ";}")]));
 };
 
 LinearLoader.defaultProps = {

package/build/es/linear-loader/linear-loader.stories.js

@@ -4,18 +4,10 @@ import { Layer } from '@dhis2-ui/layer';
 import { layers } from '@dhis2/ui-constants';
 import React from 'react';
 import { LinearLoader } from './index.js';
-const subtitle = `Used to inform the user that an element or page is in a loading state`;
-const description = `
-Use loading indicators whenever a component or application takes longer than 700ms to load. After this time a loader should be displayed so that the user can understand what is happening: loading is in progress. Consider that without a loading indicator a user would be unsure of their current status, so they are important UI elements.
-
-A linear loader is used when the loading time is can be measured and displayed as a percentage.
-
-\`\`\`js
-import { LinearLoader } from '@dhis2/ui'
-\`\`\`
-`;
+const subtitle = "Used to inform the user that an element or page is in a loading state";
+const description = "\nUse loading indicators whenever a component or application takes longer than 700ms to load. After this time a loader should be displayed so that the user can understand what is happening: loading is in progress. Consider that without a loading indicator a user would be unsure of their current status, so they are important UI elements.\n\nA linear loader is used when the loading time is can be measured and displayed as a percentage.\n\n```js\nimport { LinearLoader } from '@dhis2/ui'\n```\n";
 export default {
-  title: 'Feedback/Loading Indicators/Linear Loader',
+  title: 'Linear Loader',
   component: LinearLoader,
   parameters: {
     componentSubtitle: subtitle,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/loader",
-    "version": "8.1.10",
+    "version": "8.2.1",
     "description": "UI Loaders",
     "repository": {
         "type": "git",
@@ -32,7 +32,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2/ui-constants": "8.1.10",
+        "@dhis2/ui-constants": "8.2.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },