@dhis2-ui/loader 9.11.0 → 9.11.1-beta.2

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

@@ -1,13 +1,9 @@
 "use strict";
 
 var _enzyme = require("enzyme");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _circularLoader = require("../circular-loader.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('Circular Loader', () => {
   it('renders the circular loader with aria label', () => {
     const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_circularLoader.CircularLoader, {

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

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CircularLoader = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CircularLoader = _ref => {
   let {
     small,
@@ -40,9 +33,8 @@ const CircularLoader = _ref => {
   }, /*#__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, ";}")]));
+  }, [`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};}`]));
 };
-
 exports.CircularLoader = CircularLoader;
 CircularLoader.defaultProps = {
   dataTest: 'dhis2-uicore-circularloader'

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Small = exports.Large = exports.ExtraSmall = exports.Default = void 0;
+var _uiConstants = require("@dhis2/ui-constants");
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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'
+\`\`\`
+`;
+var _default = exports.default = {
+  title: 'Circular Loader',
+  component: _index.CircularLoader,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  argTypes: {
+    small: {
+      ..._uiConstants.sharedPropTypes.sizeArgType
+    },
+    large: {
+      ..._uiConstants.sharedPropTypes.sizeArgType
+    },
+    extrasmall: {
+      ..._uiConstants.sharedPropTypes.sizeArgType
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.CircularLoader, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  'aria-label': 'Default Loader'
+};
+const Small = exports.Small = Template.bind({});
+Small.args = {
+  small: true,
+  'aria-label': 'Small Loader'
+};
+const Large = exports.Large = Template.bind({});
+Large.args = {
+  large: true,
+  'aria-label': 'Large Loader'
+};
+const ExtraSmall = exports.ExtraSmall = Template.bind({});
+ExtraSmall.args = {
+  extrasmall: true,
+  'aria-label': 'ExtraSmall Loader'
+};

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "CircularLoader", {
     return _circularLoader.CircularLoader;
   }
 });
-
 var _circularLoader = require("./circular-loader.js");

package/build/cjs/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "LinearLoader", {
     return _index.LinearLoader;
   }
 });
-
 var _index = require("./linear-loader/index.js");
-
 var _index2 = require("./circular-loader/index.js");

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

@@ -1,13 +1,9 @@
 "use strict";
 
 var _enzyme = require("enzyme");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _linearLoader = require("../linear-loader.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('Linear Loader', () => {
   it('renders the linear loader with provided aria attributes', () => {
     const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_linearLoader.LinearLoader, {

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "LinearLoader", {
     return _linearLoader.LinearLoader;
   }
 });
-
 var _linearLoader = require("./linear-loader.js");

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

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LinearLoader = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Progress = _ref => {
   let {
     amount,
@@ -30,18 +23,16 @@ const Progress = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "686723300",
     dynamic: [amount]
-  }, ["div.__jsx-style-dynamic-selector{width:".concat(amount, "%;}")]), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, [`div.__jsx-style-dynamic-selector{width:${amount}%;}`]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3392977398",
     dynamic: [_uiConstants.theme.primary600, _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, ";}")]));
+  }, [`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};}`]));
 };
-
 Progress.propTypes = {
   amount: _propTypes.default.number.isRequired,
   className: _propTypes.default.string,
   invert: _propTypes.default.bool
 };
-
 const LinearLoader = _ref2 => {
   let {
     amount,
@@ -68,9 +59,8 @@ const LinearLoader = _ref2 => {
   }, ["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:".concat(width, ";margin:").concat(margin, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{width:${width};margin:${margin};}`]));
 };
-
 exports.LinearLoader = LinearLoader;
 LinearLoader.defaultProps = {
   margin: _uiConstants.spacers.dp12,
@@ -83,13 +73,10 @@ LinearLoader.propTypes = {
   'aria-label': _propTypes.default.string,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Use inverted color scheme */
   invert: _propTypes.default.bool,
-
   /** The margin around the loader, can be a full shorthand */
   margin: _propTypes.default.string,
-
   /** The width of the entire indicator */
   width: _propTypes.default.string
 };

package/build/cjs/linear-loader/{linear-loader.stories.js → linear-loader.prod.stories.js}

@@ -4,24 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RTL = exports.OverlayPage = exports.OverlayComponent = exports.Determinate = void 0;
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _center = require("@dhis2-ui/center");
-
 var _cover = require("@dhis2-ui/cover");
-
 var _layer = require("@dhis2-ui/layer");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 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 = "\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 = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Linear Loader',
   component: _index.LinearLoader,
   parameters: {
@@ -42,21 +42,16 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Determinate = args => /*#__PURE__*/_react.default.createElement(_index.LinearLoader, args);
-
 exports.Determinate = Determinate;
 Determinate.args = {
   amount: 60,
   'aria-label': 'Determinate Loader'
 };
-
 const OverlayPage = args => /*#__PURE__*/_react.default.createElement(_layer.Layer, {
   level: _uiConstants.layers.blocking,
   translucent: true
 }, /*#__PURE__*/_react.default.createElement(_center.Center, null, /*#__PURE__*/_react.default.createElement(_index.LinearLoader, args)));
-
 exports.OverlayPage = OverlayPage;
 OverlayPage.args = {
   amount: 30,
@@ -67,7 +62,6 @@ OverlayPage.parameters = {
     inlineStories: false
   }
 };
-
 const OverlayComponent = args => /*#__PURE__*/_react.default.createElement("div", {
   style: {
     width: '400px',
@@ -76,17 +70,14 @@ const OverlayComponent = args => /*#__PURE__*/_react.default.createElement("div"
 }, /*#__PURE__*/_react.default.createElement(_cover.Cover, {
   translucent: true
 }, /*#__PURE__*/_react.default.createElement(_center.Center, null, /*#__PURE__*/_react.default.createElement(_index.LinearLoader, args))));
-
 exports.OverlayComponent = OverlayComponent;
 OverlayComponent.args = {
   amount: 80,
   'aria-label': 'Loader with Overlay Component'
 };
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_index.LinearLoader, args));
-
 exports.RTL = RTL;
 RTL.args = {
   amount: 60

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

@@ -3,7 +3,6 @@ import { colors, sharedPropTypes } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const CircularLoader = _ref => {
   let {
     small,
@@ -27,9 +26,8 @@ const CircularLoader = _ref => {
   }, /*#__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, ";}")]));
+  }, [`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};}`]));
 };
-
 CircularLoader.defaultProps = {
   dataTest: 'dhis2-uicore-circularloader'
 };

package/build/es/circular-loader/{circular-loader.stories.js → circular-loader.prod.stories.js}

@@ -1,8 +1,16 @@
 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 = "\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";
+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'
+\`\`\`
+`;
 export default {
   title: 'Circular Loader',
   component: CircularLoader,
@@ -15,17 +23,18 @@ export default {
     }
   },
   argTypes: {
-    small: { ...sharedPropTypes.sizeArgType
+    small: {
+      ...sharedPropTypes.sizeArgType
     },
-    large: { ...sharedPropTypes.sizeArgType
+    large: {
+      ...sharedPropTypes.sizeArgType
     },
-    extrasmall: { ...sharedPropTypes.sizeArgType
+    extrasmall: {
+      ...sharedPropTypes.sizeArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(CircularLoader, args);
-
 export const Default = Template.bind({});
 Default.args = {
   'aria-label': 'Default Loader'

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

@@ -3,7 +3,6 @@ import { colors, theme, spacers } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const Progress = _ref => {
   let {
     amount,
@@ -17,18 +16,16 @@ const Progress = _ref => {
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "686723300",
     dynamic: [amount]
-  }, ["div.__jsx-style-dynamic-selector{width:".concat(amount, "%;}")]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, [`div.__jsx-style-dynamic-selector{width:${amount}%;}`]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3392977398",
     dynamic: [theme.primary600, 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, ";}")]));
+  }, [`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};}`]));
 };
-
 Progress.propTypes = {
   amount: PropTypes.number.isRequired,
   className: PropTypes.string,
   invert: PropTypes.bool
 };
-
 const LinearLoader = _ref2 => {
   let {
     amount,
@@ -55,9 +52,8 @@ const LinearLoader = _ref2 => {
   }, ["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:".concat(width, ";margin:").concat(margin, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{width:${width};margin:${margin};}`]));
 };
-
 LinearLoader.defaultProps = {
   margin: spacers.dp12,
   width: '300px',
@@ -69,13 +65,10 @@ LinearLoader.propTypes = {
   'aria-label': PropTypes.string,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Use inverted color scheme */
   invert: PropTypes.bool,
-
   /** The margin around the loader, can be a full shorthand */
   margin: PropTypes.string,
-
   /** The width of the entire indicator */
   width: PropTypes.string
 };

package/build/es/linear-loader/{linear-loader.stories.js → linear-loader.prod.stories.js}

@@ -1,11 +1,19 @@
+import { layers } from '@dhis2/ui-constants';
 import { Center } from '@dhis2-ui/center';
 import { Cover } from '@dhis2-ui/cover';
 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 = "\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";
+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'
+\`\`\`
+`;
 export default {
   title: 'Linear Loader',
   component: LinearLoader,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/loader",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.2",
     "description": "UI Loaders",
     "repository": {
         "type": "git",
@@ -22,18 +22,18 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2/ui-constants": "9.11.1-beta.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

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

@@ -1,64 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Small = exports.Large = exports.ExtraSmall = exports.Default = void 0;
-
-var _uiConstants = require("@dhis2/ui-constants");
-
-var _react = _interopRequireDefault(require("react"));
-
-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 = "\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: 'Circular Loader',
-  component: _index.CircularLoader,
-  parameters: {
-    componentSubtitle: subtitle,
-    docs: {
-      description: {
-        component: description
-      }
-    }
-  },
-  argTypes: {
-    small: { ..._uiConstants.sharedPropTypes.sizeArgType
-    },
-    large: { ..._uiConstants.sharedPropTypes.sizeArgType
-    },
-    extrasmall: { ..._uiConstants.sharedPropTypes.sizeArgType
-    }
-  }
-};
-exports.default = _default;
-
-const Template = args => /*#__PURE__*/_react.default.createElement(_index.CircularLoader, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-Default.args = {
-  'aria-label': 'Default Loader'
-};
-const Small = Template.bind({});
-exports.Small = Small;
-Small.args = {
-  small: true,
-  'aria-label': 'Small Loader'
-};
-const Large = Template.bind({});
-exports.Large = Large;
-Large.args = {
-  large: true,
-  'aria-label': 'Large Loader'
-};
-const ExtraSmall = Template.bind({});
-exports.ExtraSmall = ExtraSmall;
-ExtraSmall.args = {
-  extrasmall: true,
-  'aria-label': 'ExtraSmall Loader'
-};