@entur/loader - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.3.0](https://bitbucket.org/enturas/design-system/compare/@entur/loader@0.2.3...@entur/loader@0.3.0) (2019-11-22)
+
+### Bug Fixes
+
+- fixing potential duplication of props naming ([6efd896](https://bitbucket.org/enturas/design-system/commits/6efd896d381bca09bc047dbdaec6d2629a9571db))
+
+### Features
+
+- **types:** exporting all public types for public components ([4a277ab](https://bitbucket.org/enturas/design-system/commits/4a277ab266fdb32a6760821a07b1c6cc716bac85))
+- adding the skeleton components ([e669345](https://bitbucket.org/enturas/design-system/commits/e6693452a20c6b3e44642113b6d08a72c1b100ea))
+
 ## [0.2.3](https://bitbucket.org/enturas/design-system/compare/@entur/loader@0.2.2...@entur/loader@0.2.3) (2019-11-18)
@@ -8,0 +19,0 @@

dist/index.d.ts

 import React from "react";
-declare type Props = {
+import React_$0 from "react";
+import { CSSProperties } from "react";
+declare type LoaderProps = {
     /** Tekst som beskriver prosessen */
@@ -11,3 +13,29 @@ children?: React.ReactNode;
 };
-declare const Loader: React.FC<Props>;
-export { Loader };
+declare const Loader: React.FC<LoaderProps>;
+declare type SkeletonRectangleProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Bredden til komponenten. Er 100% som default. */
+    width?: CSSProperties;
+    /** Høyden til komponenten. 1rem som default. */
+    height?: CSSProperties;
+    [key: string]: any;
+};
+declare const SkeletonRectangle: React_$0.FC<SkeletonRectangleProps>;
+declare type SkeletonCircleProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Høyde og bredde av sirkelen. 1rem som default */
+    size: CSSProperties;
+    [key: string]: any;
+};
+declare const SkeletonCircle: React_$0.FC<SkeletonCircleProps>;
+declare type SkeletonWrapperProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Skeletonkomponentene som skal vises */
+    children: React.ReactNode;
+    [key: string]: any;
+};
+declare const SkeletonWrapper: React.FC<SkeletonWrapperProps>;
+export { LoaderProps, Loader, SkeletonRectangleProps, SkeletonRectangle, SkeletonCircleProps, SkeletonCircle, SkeletonWrapperProps, SkeletonWrapper };

dist/loader.cjs.development.js

@@ -9,2 +9,3 @@ 'use strict';
 var typography = require('@entur/typography');
+var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 
@@ -42,3 +43,126 @@ var Loader = function Loader(_ref) {
 
+var BaseSkeleton = function BaseSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, ["className"]);
+
+  return React.createElement("div", Object.assign({
+    className: classNames('eds-skeleton', 'eds-skeleton--animate', className),
+    role: "alert",
+    "aria-busy": true,
+    "aria-live": "polite"
+  }, rest));
+};
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(source, true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(source).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+var SkeletonRectangle = function SkeletonRectangle(_ref) {
+  var className = _ref.className,
+      width = _ref.width,
+      height = _ref.height,
+      rest = _objectWithoutProperties(_ref, ["className", "width", "height"]);
+
+  return React.createElement(BaseSkeleton, Object.assign({
+    className: classNames('eds-skeleton-rectangle', className),
+    style: _objectSpread({
+      width: width,
+      height: height
+    }, rest.style)
+  }, rest));
+};
+
+function ownKeys$1(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread$1(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys$1(source, true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys$1(source).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+var SkeletonCircle = function SkeletonCircle(_ref) {
+  var className = _ref.className,
+      size = _ref.size,
+      rest = _objectWithoutProperties(_ref, ["className", "size"]);
+
+  return React.createElement(BaseSkeleton, Object.assign({
+    className: classNames(className, 'eds-skeleton-circle'),
+    style: _objectSpread$1({
+      width: size,
+      height: size
+    }, rest.style)
+  }, rest));
+};
+
+var SkeletonWrapper = function SkeletonWrapper(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["className", "children"]);
+
+  return React.createElement("div", Object.assign({
+    className: classNames('eds-skeleton-wrapper', className),
+    role: "alert",
+    "aria-busy": true,
+    "aria-live": "polite"
+  }, rest), children);
+};
+
 exports.Loader = Loader;
+exports.SkeletonCircle = SkeletonCircle;
+exports.SkeletonRectangle = SkeletonRectangle;
+exports.SkeletonWrapper = SkeletonWrapper;
 //# sourceMappingURL=loader.cjs.development.js.map

dist/loader.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var r=e(require("@babel/runtime/helpers/objectWithoutProperties")),a=e(require("react")),t=e(require("classnames")),s=require("@entur/typography");exports.Loader=function(e){var i=e.children,l=e.className,n=e.progress,d=void 0===n?"indeterminate":n,o=r(e,["children","className","progress"]),c="indeterminate"===d,u={};return c||(u={"--loader-width":"".concat(d,"%")}),a.createElement("div",Object.assign({className:t("eds-loader",l),role:"alert","aria-busy":!0,"aria-live":"polite"},o),i&&a.createElement(s.Heading4,{className:"eds-loader__label"},i),a.createElement("div",{className:t("eds-loader__bar",{"eds-loader__bar--indeterminate":c}),style:u}))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var r=e(require("@babel/runtime/helpers/objectWithoutProperties")),t=e(require("react")),a=e(require("classnames")),n=require("@entur/typography"),s=e(require("@babel/runtime/helpers/defineProperty")),i=function(e){var n=e.className,s=r(e,["className"]);return t.createElement("div",Object.assign({className:a("eds-skeleton","eds-skeleton--animate",n),role:"alert","aria-busy":!0,"aria-live":"polite"},s))};function c(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r&&(a=a.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,a)}return t}function l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(t,!0).forEach((function(r){s(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(t).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r&&(a=a.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,a)}return t}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(t,!0).forEach((function(r){s(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(t).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}exports.Loader=function(e){var s=e.children,i=e.className,c=e.progress,l=void 0===c?"indeterminate":c,o=r(e,["children","className","progress"]),p="indeterminate"===l,u={};return p||(u={"--loader-width":"".concat(l,"%")}),t.createElement("div",Object.assign({className:a("eds-loader",i),role:"alert","aria-busy":!0,"aria-live":"polite"},o),s&&t.createElement(n.Heading4,{className:"eds-loader__label"},s),t.createElement("div",{className:a("eds-loader__bar",{"eds-loader__bar--indeterminate":p}),style:u}))},exports.SkeletonCircle=function(e){var n=e.className,s=e.size,c=r(e,["className","size"]);return t.createElement(i,Object.assign({className:a(n,"eds-skeleton-circle"),style:p({width:s,height:s},c.style)},c))},exports.SkeletonRectangle=function(e){var n=e.className,s=e.width,c=e.height,o=r(e,["className","width","height"]);return t.createElement(i,Object.assign({className:a("eds-skeleton-rectangle",n),style:l({width:s,height:c},o.style)},o))},exports.SkeletonWrapper=function(e){var n=e.className,s=e.children,i=r(e,["className","children"]);return t.createElement("div",Object.assign({className:a("eds-skeleton-wrapper",n),role:"alert","aria-busy":!0,"aria-live":"polite"},i),s)};
 //# sourceMappingURL=loader.cjs.production.min.js.map

dist/loader.esm.js

@@ -5,2 +5,3 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Heading4 } from '@entur/typography';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 
@@ -38,3 +39,123 @@ var Loader = function Loader(_ref) {
 
-export { Loader };
+var BaseSkeleton = function BaseSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, ["className"]);
+
+  return React.createElement("div", Object.assign({
+    className: classNames('eds-skeleton', 'eds-skeleton--animate', className),
+    role: "alert",
+    "aria-busy": true,
+    "aria-live": "polite"
+  }, rest));
+};
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(source, true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(source).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+var SkeletonRectangle = function SkeletonRectangle(_ref) {
+  var className = _ref.className,
+      width = _ref.width,
+      height = _ref.height,
+      rest = _objectWithoutProperties(_ref, ["className", "width", "height"]);
+
+  return React.createElement(BaseSkeleton, Object.assign({
+    className: classNames('eds-skeleton-rectangle', className),
+    style: _objectSpread({
+      width: width,
+      height: height
+    }, rest.style)
+  }, rest));
+};
+
+function ownKeys$1(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread$1(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys$1(source, true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys$1(source).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+var SkeletonCircle = function SkeletonCircle(_ref) {
+  var className = _ref.className,
+      size = _ref.size,
+      rest = _objectWithoutProperties(_ref, ["className", "size"]);
+
+  return React.createElement(BaseSkeleton, Object.assign({
+    className: classNames(className, 'eds-skeleton-circle'),
+    style: _objectSpread$1({
+      width: size,
+      height: size
+    }, rest.style)
+  }, rest));
+};
+
+var SkeletonWrapper = function SkeletonWrapper(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["className", "children"]);
+
+  return React.createElement("div", Object.assign({
+    className: classNames('eds-skeleton-wrapper', className),
+    role: "alert",
+    "aria-busy": true,
+    "aria-live": "polite"
+  }, rest), children);
+};
+
+export { Loader, SkeletonCircle, SkeletonRectangle, SkeletonWrapper };
 //# sourceMappingURL=loader.esm.js.map

package.json

 {
   "name": "@entur/loader",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "license": "EUPL-1.2",
@@ -30,7 +30,6 @@ "main": "dist/index.js",
   "dependencies": {
-    "@entur/tokens": "^1.0.1",
-    "@entur/typography": "^0.4.5",
+    "@entur/tokens": "^1.0.2",
+    "@entur/typography": "^0.5.0",
     "classnames": "^2.2.6"
-  },
-  "gitHead": "636c2b374cdfcd69a5faa02224b85616bc4aca2b"
+  }
 }

README.md

@@ -5,3 +5,3 @@ # Loader
 
-> 💡 Looking for the [documentation](https://design.entur.org/komponenter/loaders)?
+> 💡 Looking for the [documentation](https://design.entur.org/komponenter/feedback/loaders)?
 
@@ -18,2 +18,2 @@ ## Installation
 
-Please refer to the [documentation](https://design.entur.org/komponenter/loaders) for usage information.
+Please refer to the [documentation](https://design.entur.org/komponenter/feedback/loaders) for usage information.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36062

increased by12.91%

Lines of code

413

increased by208.21%

Worsened metrics

Number of package files

12

decreased by-7.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@entur/typography@0.5.0(transitive)

• - Removed@entur/typography@0.4.5(transitive)

• Updated@entur/tokens@^1.0.2

• Updated@entur/typography@^0.5.0