@hig/skeleton-item - npm Package Compare versions

Comparing version 0.3.1 to 1.0.0

build/index.es.js

@@ -0,6 +1,45 @@
+import { css } from 'emotion';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { ThemeContext } from '@hig/themes';
+import { ThemeContext } from '@hig/theme-context';
 
+function stylesheet(props, themeData) {
+  var height = props.height,
+      marginBottom = props.marginBottom,
+      maxWidth = props.maxWidth;
+
+  return {
+    skeletonItem: {
+      backgroundColor: themeData["skeletonItem.backgroundColor"],
+      borderRadius: themeData["skeletonItem.borderRadius"],
+      height: height || themeData["skeletonItem.defaultHeight"],
+      overflow: "hidden",
+      position: "relative",
+      marginBottom: marginBottom,
+      maxWidth: maxWidth,
+      "&:after": {
+        animation: "3s ease-in infinite shine",
+        backgroundImage: "linear-gradient(135deg, transparent 0%, transparent 40%, " + themeData["skeletonItem.highlightColor"] + " 50%, transparent 60%, transparent 100%)",
+        bottom: 0,
+        content: '""',
+        left: 0,
+        position: "absolute",
+        top: 0,
+        width: "300px"
+      },
+      "@keyframes shine": {
+        from: {
+          transform: "translateX(-100%)"
+        },
+        "60%": {
+          transform: "translateX(100%)"
+        },
+        to: {
+          transform: "translateX(100%)"
+        }
+      }
+    }
+  };
+}
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -26,4 +65,8 @@
     value: function render() {
-      var _this2 = this;
+      var _props = this.props,
+          height = _props.height,
+          marginBottom = _props.marginBottom,
+          maxWidth = _props.maxWidth;
 
+
       return React.createElement(
@@ -33,11 +76,10 @@ ThemeContext.Consumer,
         function (_ref) {
-          var themeClass = _ref.themeClass;
-          return React.createElement("div", {
-            className: cx("hig__skeleton-item", themeClass),
-            style: {
-              maxWidth: _this2.props.maxWidth,
-              marginBottom: _this2.props.marginBottom,
-              height: _this2.props.height
-            }
-          });
+          var resolvedRoles = _ref.resolvedRoles;
+
+          var styles = stylesheet({
+            maxWidth: maxWidth,
+            marginBottom: marginBottom,
+            height: height
+          }, resolvedRoles);
+          return React.createElement("div", { className: css(styles.skeletonItem) });
         }
@@ -44,0 +86,0 @@ );

build/index.js

@@ -7,8 +7,47 @@ 'use strict';
 
+var emotion = require('emotion');
+var PropTypes = _interopDefault(require('prop-types'));
 var React = require('react');
 var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
-var cx = _interopDefault(require('classnames'));
-var themes = require('@hig/themes');
+var themeContext = require('@hig/theme-context');
 
+function stylesheet(props, themeData) {
+  var height = props.height,
+      marginBottom = props.marginBottom,
+      maxWidth = props.maxWidth;
+
+  return {
+    skeletonItem: {
+      backgroundColor: themeData["skeletonItem.backgroundColor"],
+      borderRadius: themeData["skeletonItem.borderRadius"],
+      height: height || themeData["skeletonItem.defaultHeight"],
+      overflow: "hidden",
+      position: "relative",
+      marginBottom: marginBottom,
+      maxWidth: maxWidth,
+      "&:after": {
+        animation: "3s ease-in infinite shine",
+        backgroundImage: "linear-gradient(135deg, transparent 0%, transparent 40%, " + themeData["skeletonItem.highlightColor"] + " 50%, transparent 60%, transparent 100%)",
+        bottom: 0,
+        content: '""',
+        left: 0,
+        position: "absolute",
+        top: 0,
+        width: "300px"
+      },
+      "@keyframes shine": {
+        from: {
+          transform: "translateX(-100%)"
+        },
+        "60%": {
+          transform: "translateX(100%)"
+        },
+        to: {
+          transform: "translateX(100%)"
+        }
+      }
+    }
+  };
+}
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -34,17 +73,20 @@
     value: function render() {
-      var _this2 = this;
+      var _props = this.props,
+          height = _props.height,
+          marginBottom = _props.marginBottom,
+          maxWidth = _props.maxWidth;
 
+
       return React__default.createElement(
-        themes.ThemeContext.Consumer,
+        themeContext.ThemeContext.Consumer,
         null,
         function (_ref) {
-          var themeClass = _ref.themeClass;
-          return React__default.createElement("div", {
-            className: cx("hig__skeleton-item", themeClass),
-            style: {
-              maxWidth: _this2.props.maxWidth,
-              marginBottom: _this2.props.marginBottom,
-              height: _this2.props.height
-            }
-          });
+          var resolvedRoles = _ref.resolvedRoles;
+
+          var styles = stylesheet({
+            maxWidth: maxWidth,
+            marginBottom: marginBottom,
+            height: height
+          }, resolvedRoles);
+          return React__default.createElement("div", { className: emotion.css(styles.skeletonItem) });
         }
@@ -51,0 +93,0 @@ );

CHANGELOG.md

@@ -0,1 +1,18 @@
+# [@hig/skeleton-item-v1.0.0](https://github.com/Autodesk/hig/compare/@hig/skeleton-item@0.3.1...@hig/skeleton-item@1.0.0) (2019-02-26)
+
+
+### Bug Fixes
+
+* **package:** update [@hig](https://github.com/hig)/theme-context to version 2.0.0 ([ce34ca4](https://github.com/Autodesk/hig/commit/ce34ca4))
+* **package:** update emotion to version 10.0.0 ([abecf80](https://github.com/Autodesk/hig/commit/abecf80))
+* bump up theme-context dependency ([b068dab](https://github.com/Autodesk/hig/commit/b068dab))
+* combined greenkeeper prs for version updates see pr 1392 ([d0a017a](https://github.com/Autodesk/hig/commit/d0a017a))
+* release skeleton-item ([d4a1c78](https://github.com/Autodesk/hig/commit/d4a1c78))
+* Update theme data package ([dc5178a](https://github.com/Autodesk/hig/commit/dc5178a))
+
+
+### BREAKING CHANGES
+
+* * Remove CSS classname
+
 # [@hig/skeleton-item-v0.3.1](https://github.com/Autodesk/hig/compare/@hig/skeleton-item@0.3.0...@hig/skeleton-item@0.3.1) (2018-10-08)
@@ -2,0 +19,0 @@

package.json

 {
   "name": "@hig/skeleton-item",
-  "version": "0.3.1",
+  "version": "1.0.0",
   "description": "HIG SkeletonItem component",
@@ -17,3 +17,2 @@ "author": "Autodesk Inc.",
   "module": "build/index.es.js",
-  "style": "build/index.css",
   "files": [
@@ -23,13 +22,12 @@ "build/*"
   "dependencies": {
-    "@hig/themes": "^0.3.0",
-    "classnames": "^2.2.5",
-    "prop-types": "^15.6.1"
+    "@hig/theme-context": "^2.1.0",
+    "emotion": "^10.0.0",
+    "prop-types": "^15.7.1"
   },
   "devDependencies": {
-    "@hig/babel-preset": "^0.1.0",
+    "@hig/babel-preset": "^0.1.1",
     "@hig/eslint-config": "^0.1.0",
     "@hig/jest-preset": "^0.1.0",
     "@hig/scripts": "^0.1.2",
-    "@hig/semantic-release-config": "^0.1.0",
-    "@hig/styles": "^0.2.3"
+    "@hig/semantic-release-config": "^0.1.0"
   },
@@ -36,0 +34,0 @@ "peerDependencies": {

README.md

@@ -11,7 +11,6 @@ # Skeleton Item
 
-## Import the component and CSS
+## Import the component
 
 ```
 import SkeletonItem from '@hig/skeleton-item';
-import '@hig/skeleton-item/build/index.css';
 ```
@@ -18,0 +17,0 @@

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

5

decreased by-16.67%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

13658

decreased by-44.45%

Number of package files

5

decreased by-28.57%

Lines of code

230

decreased by-38.17%

Number of lines in readme file

22

decreased by-4.35%

Dependency changes

• + Added@hig/theme-context@^2.1.0

• + Addedemotion@^10.0.0

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/runtime@7.26.0(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@emotion/cache@10.0.29(transitive)

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/serialize@0.11.16(transitive)

• + Added@emotion/sheet@0.9.4(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@emotion/utils@0.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@hig/theme-context@2.1.3(transitive)

• + Added@hig/theme-data@3.4.2(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedbabel-plugin-emotion@10.2.2(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@10.0.27(transitive)

• + Addedcreate-react-context@0.2.3(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedemotion@10.0.27(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedgud@1.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removed@hig/themes@^0.3.0

• - Removedclassnames@^2.2.5

• - Removed@hig/theme-data-poc@0.0.8-alpha(transitive)

• - Removed@hig/themes@0.3.0(transitive)

• - Removedclassnames@2.5.1(transitive)

• Updatedprop-types@^15.7.1