@dhis2-ui/loader - npm Package Compare versions

Comparing version 6.10.6 to 6.11.0

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

@@ -23,2 +23,4 @@ "use strict";
   large,
+  extrasmall,
+  invert,
   className,
@@ -29,20 +31,12 @@ dataTest
   "data-test": dataTest,
-  className: _style.default.dynamic([["439163782", [_uiConstants.spacers.dp16, _uiConstants.theme.primary600]]]) + " " + ((0, _classnames.default)(className, {
+  className: _style.default.dynamic([["3803726117", [_uiConstants.colors.blue600, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)(className, {
     small,
-    large
+    large,
+    extrasmall,
+    invert
   }) || "")
-}, /*#__PURE__*/_react.default.createElement("svg", {
-  viewBox: "22 22 44 44",
-  className: _style.default.dynamic([["439163782", [_uiConstants.spacers.dp16, _uiConstants.theme.primary600]]])
-}, /*#__PURE__*/_react.default.createElement("circle", {
-  cx: "44",
-  cy: "44",
-  r: "20.2",
-  fill: "none",
-  strokeWidth: "3.6",
-  className: _style.default.dynamic([["439163782", [_uiConstants.spacers.dp16, _uiConstants.theme.primary600]]]) + " " + "circle"
-})), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "439163782",
-  dynamic: [_uiConstants.spacers.dp16, _uiConstants.theme.primary600]
-}, [`div.__jsx-style-dynamic-selector{display:inline-block;margin:${_uiConstants.spacers.dp16};color:${_uiConstants.theme.primary600};-webkit-animation:anim-rotate-__jsx-style-dynamic-selector 1.4s linear infinite;animation:anim-rotate-__jsx-style-dynamic-selector 1.4s linear infinite;width:50px;height:50px;}`, ".small.__jsx-style-dynamic-selector{width:24px;height:24px;}", ".large.__jsx-style-dynamic-selector{width:80px;height:80px;}", "svg.__jsx-style-dynamic-selector{max-height:100%;max-width:100%;}", ".circle.__jsx-style-dynamic-selector{stroke:currentColor;stroke-dasharray:80px,200px;stroke-dashoffset:0;-webkit-animation:anim-dash-__jsx-style-dynamic-selector 1.4s ease-in-out infinite;animation:anim-dash-__jsx-style-dynamic-selector 1.4s ease-in-out infinite;}", "@-webkit-keyframes anim-rotate-__jsx-style-dynamic-selector{100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes anim-rotate-__jsx-style-dynamic-selector{100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@-webkit-keyframes anim-dash-__jsx-style-dynamic-selector{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0;}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;}100%{stroke-dasharray:100px,200px;stroke-dashoffset:-120px;}}", "@keyframes anim-dash-__jsx-style-dynamic-selector{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0;}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;}100%{stroke-dasharray:100px,200px;stroke-dashoffset:-120px;}}"]));
+}, /*#__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};}`]));
 
@@ -56,4 +50,6 @@ exports.CircularLoader = CircularLoader;
   dataTest: _propTypes.default.string,
+  extrasmall: _uiConstants.sharedPropTypes.sizePropType,
+  invert: _propTypes.default.bool,
   large: _uiConstants.sharedPropTypes.sizePropType,
   small: _uiConstants.sharedPropTypes.sizePropType
 };

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

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.Large = exports.Small = exports.Default = exports.default = void 0;
+exports.ExtraSmall = exports.Large = exports.Small = exports.Default = exports.default = void 0;
 
@@ -42,2 +42,4 @@ var _uiConstants = require("@dhis2/ui-constants");
     large: { ..._uiConstants.sharedPropTypes.sizeArgType
+    },
+    extrasmall: { ..._uiConstants.sharedPropTypes.sizeArgType
     }
@@ -61,2 +63,7 @@ }
   large: true
+};
+const ExtraSmall = Template.bind({});
+exports.ExtraSmall = ExtraSmall;
+ExtraSmall.args = {
+  extrasmall: true
 };

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

@@ -46,9 +46,9 @@ "use strict";
     "data-test": dataTest,
-    className: "jsx-1195089001 " + _style.default.dynamic([["2979463364", [width, margin]]]) + " " + (className || "")
+    className: "jsx-2715045314 " + _style.default.dynamic([["3087814414", [width, margin]]]) + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement(Progress, {
     amount: amount
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1195089001"
-  }, ["div.jsx-1195089001{display:block;overflow:hidden;overflow-x:hidden;overflow-y:hidden;background-color:rgba(110,122,138,0.2);}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2979463364",
+    id: "2715045314"
+  }, ["div.jsx-2715045314{display:block;overflow:hidden;overflow-x:hidden;overflow-y:hidden;background-color:rgba(110,122,138,0.15);}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3087814414",
     dynamic: [width, margin]
@@ -55,0 +55,0 @@ }, [`div.__jsx-style-dynamic-selector{width:${width};margin:${margin};}`]));

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

 import _JSXStyle from "styled-jsx/style";
-import { theme, spacers, sharedPropTypes } from '@dhis2/ui-constants';
+import { colors, sharedPropTypes } from '@dhis2/ui-constants';
 import cx from 'classnames';
@@ -10,2 +10,4 @@ import PropTypes from 'prop-types';
   large,
+  extrasmall,
+  invert,
   className,
@@ -16,20 +18,12 @@ dataTest
   "data-test": dataTest,
-  className: _JSXStyle.dynamic([["439163782", [spacers.dp16, theme.primary600]]]) + " " + (cx(className, {
+  className: _JSXStyle.dynamic([["3803726117", [colors.blue600, colors.white]]]) + " " + (cx(className, {
     small,
-    large
+    large,
+    extrasmall,
+    invert
   }) || "")
-}, /*#__PURE__*/React.createElement("svg", {
-  viewBox: "22 22 44 44",
-  className: _JSXStyle.dynamic([["439163782", [spacers.dp16, theme.primary600]]])
-}, /*#__PURE__*/React.createElement("circle", {
-  cx: "44",
-  cy: "44",
-  r: "20.2",
-  fill: "none",
-  strokeWidth: "3.6",
-  className: _JSXStyle.dynamic([["439163782", [spacers.dp16, theme.primary600]]]) + " " + "circle"
-})), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "439163782",
-  dynamic: [spacers.dp16, theme.primary600]
-}, [`div.__jsx-style-dynamic-selector{display:inline-block;margin:${spacers.dp16};color:${theme.primary600};-webkit-animation:anim-rotate-__jsx-style-dynamic-selector 1.4s linear infinite;animation:anim-rotate-__jsx-style-dynamic-selector 1.4s linear infinite;width:50px;height:50px;}`, ".small.__jsx-style-dynamic-selector{width:24px;height:24px;}", ".large.__jsx-style-dynamic-selector{width:80px;height:80px;}", "svg.__jsx-style-dynamic-selector{max-height:100%;max-width:100%;}", ".circle.__jsx-style-dynamic-selector{stroke:currentColor;stroke-dasharray:80px,200px;stroke-dashoffset:0;-webkit-animation:anim-dash-__jsx-style-dynamic-selector 1.4s ease-in-out infinite;animation:anim-dash-__jsx-style-dynamic-selector 1.4s ease-in-out infinite;}", "@-webkit-keyframes anim-rotate-__jsx-style-dynamic-selector{100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes anim-rotate-__jsx-style-dynamic-selector{100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@-webkit-keyframes anim-dash-__jsx-style-dynamic-selector{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0;}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;}100%{stroke-dasharray:100px,200px;stroke-dashoffset:-120px;}}", "@keyframes anim-dash-__jsx-style-dynamic-selector{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0;}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;}100%{stroke-dasharray:100px,200px;stroke-dashoffset:-120px;}}"]));
+}, /*#__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};}`]));
 
@@ -42,2 +36,4 @@ CircularLoader.defaultProps = {
   dataTest: PropTypes.string,
+  extrasmall: sharedPropTypes.sizePropType,
+  invert: PropTypes.bool,
   large: sharedPropTypes.sizePropType,
@@ -44,0 +40,0 @@ small: sharedPropTypes.sizePropType

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

@@ -29,2 +29,4 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
     large: { ...sharedPropTypes.sizeArgType
+    },
+    extrasmall: { ...sharedPropTypes.sizeArgType
     }
@@ -44,2 +46,6 @@ }
   large: true
+};
+export const ExtraSmall = Template.bind({});
+ExtraSmall.args = {
+  extrasmall: true
 };

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

@@ -34,9 +34,9 @@ import _JSXStyle from "styled-jsx/style";
     "data-test": dataTest,
-    className: "jsx-1195089001 " + _JSXStyle.dynamic([["2979463364", [width, margin]]]) + " " + (className || "")
+    className: "jsx-2715045314 " + _JSXStyle.dynamic([["3087814414", [width, margin]]]) + " " + (className || "")
   }, /*#__PURE__*/React.createElement(Progress, {
     amount: amount
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1195089001"
-  }, ["div.jsx-1195089001{display:block;overflow:hidden;overflow-x:hidden;overflow-y:hidden;background-color:rgba(110,122,138,0.2);}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2979463364",
+    id: "2715045314"
+  }, ["div.jsx-2715045314{display:block;overflow:hidden;overflow-x:hidden;overflow-y:hidden;background-color:rgba(110,122,138,0.15);}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3087814414",
     dynamic: [width, margin]
@@ -43,0 +43,0 @@ }, [`div.__jsx-style-dynamic-selector{width:${width};margin:${margin};}`]));

package.json

 {
     "name": "@dhis2-ui/loader",
-    "version": "6.10.6",
+    "version": "6.11.0",
     "description": "UI Loaders",
@@ -34,3 +34,3 @@ "repository": {
         "@dhis2/prop-types": "^1.6.4",
-        "@dhis2/ui-constants": "6.10.6",
+        "@dhis2/ui-constants": "6.11.0",
         "classnames": "^2.3.1",
@@ -37,0 +37,0 @@ "prop-types": "^15.7.2"

No alert changes

Improved metrics

Lines of code

467

increased by0.65%

Worsened metrics

Total package byte prevSize

20218

decreased by-4.87%

Dependency changes

• + Added@dhis2/ui-constants@6.11.0(transitive)

• - Removed@dhis2/ui-constants@6.10.6(transitive)

• Updated@dhis2/ui-constants@6.11.0