@hig/progress-bar - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

build/index.es.js

@@ -1,5 +0,6 @@
-import { keyframes, css } from 'emotion';
+import { keyframes, cx, css } from 'emotion';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeContext } from '@hig/theme-context';
+import { createCustomClassNames } from '@hig/utils';
 
@@ -51,7 +52,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 function stylesheet(props, themeData) {
-  var percentComplete = props.percentComplete;
+  var percentComplete = props.percentComplete,
+      customStylesheet = props.stylesheet;
 
   var isIndeterminate = percentComplete === null || percentComplete === undefined;
 
-  return {
+  var styles = {
     wrapper: {
@@ -83,2 +85,4 @@ position: "relative",
   };
+
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
@@ -88,2 +92,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -107,5 +113,13 @@
     value: function render() {
-      var percentComplete = this.props.percentComplete;
+      var _props = this.props,
+          percentComplete = _props.percentComplete,
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["percentComplete", "stylesheet"]);
 
+      var className = otherProps.className;
 
+      var innerWrapperClassNames = createCustomClassNames(className, "progress-bar");
+      var fillClassNames = createCustomClassNames(className, "fill");
+      var polygonClassNames = createCustomClassNames(className, "polygon");
+
       return React.createElement(
@@ -117,7 +131,7 @@ ThemeContext.Consumer,
 
-          var styles = stylesheet({ percentComplete: percentComplete }, resolvedRoles);
+          var styles = stylesheet({ percentComplete: percentComplete, stylesheet: customStylesheet }, resolvedRoles);
           return React.createElement(
             "div",
             {
-              className: css(styles.wrapper),
+              className: cx(css(styles.wrapper), className),
               role: "progressbar",
@@ -130,4 +144,8 @@ "aria-valuemin": "0",
               "div",
-              { className: css(styles.progressBar) },
-              React.createElement("div", { className: css(styles.progressBarFill) }),
+              {
+                className: cx(css(styles.progressBar), innerWrapperClassNames)
+              },
+              React.createElement("div", {
+                className: cx(css(styles.progressBarFill), fillClassNames)
+              }),
               React.createElement(
@@ -144,3 +162,3 @@ "svg",
                 React.createElement("polygon", {
-                  className: css(styles.polygon),
+                  className: cx(css(styles.polygon), polygonClassNames),
                   id: "end-right",
@@ -164,3 +182,7 @@ points: "0 0 2.68 0 1 4 0 4"
    */
-  percentComplete: PropTypes.number
+  percentComplete: PropTypes.number,
+  /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func
 };
@@ -177,2 +199,9 @@ ProgressBar.__docgenInfo = {
       "description": "A number from 0 to 100 representing the percent the delayed operation has completed"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
     }
@@ -179,0 +208,0 @@ }

build/index.js

@@ -12,2 +12,3 @@ 'use strict';
 var themeContext = require('@hig/theme-context');
+var utils = require('@hig/utils');
 
@@ -59,7 +60,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 function stylesheet(props, themeData) {
-  var percentComplete = props.percentComplete;
+  var percentComplete = props.percentComplete,
+      customStylesheet = props.stylesheet;
 
   var isIndeterminate = percentComplete === null || percentComplete === undefined;
 
-  return {
+  var styles = {
     wrapper: {
@@ -91,2 +93,4 @@ position: "relative",
   };
+
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
@@ -96,2 +100,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -115,5 +121,13 @@
     value: function render() {
-      var percentComplete = this.props.percentComplete;
+      var _props = this.props,
+          percentComplete = _props.percentComplete,
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["percentComplete", "stylesheet"]);
 
+      var className = otherProps.className;
 
+      var innerWrapperClassNames = utils.createCustomClassNames(className, "progress-bar");
+      var fillClassNames = utils.createCustomClassNames(className, "fill");
+      var polygonClassNames = utils.createCustomClassNames(className, "polygon");
+
       return React__default.createElement(
@@ -125,7 +139,7 @@ themeContext.ThemeContext.Consumer,
 
-          var styles = stylesheet({ percentComplete: percentComplete }, resolvedRoles);
+          var styles = stylesheet({ percentComplete: percentComplete, stylesheet: customStylesheet }, resolvedRoles);
           return React__default.createElement(
             "div",
             {
-              className: emotion.css(styles.wrapper),
+              className: emotion.cx(emotion.css(styles.wrapper), className),
               role: "progressbar",
@@ -138,4 +152,8 @@ "aria-valuemin": "0",
               "div",
-              { className: emotion.css(styles.progressBar) },
-              React__default.createElement("div", { className: emotion.css(styles.progressBarFill) }),
+              {
+                className: emotion.cx(emotion.css(styles.progressBar), innerWrapperClassNames)
+              },
+              React__default.createElement("div", {
+                className: emotion.cx(emotion.css(styles.progressBarFill), fillClassNames)
+              }),
               React__default.createElement(
@@ -152,3 +170,3 @@ "svg",
                 React__default.createElement("polygon", {
-                  className: emotion.css(styles.polygon),
+                  className: emotion.cx(emotion.css(styles.polygon), polygonClassNames),
                   id: "end-right",
@@ -172,3 +190,7 @@ points: "0 0 2.68 0 1 4 0 4"
    */
-  percentComplete: PropTypes.number
+  percentComplete: PropTypes.number,
+  /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func
 };
@@ -185,2 +207,9 @@ ProgressBar.__docgenInfo = {
       "description": "A number from 0 to 100 representing the percent the delayed operation has completed"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
     }
@@ -187,0 +216,0 @@ }

CHANGELOG.md

@@ -0,1 +1,9 @@
+# [@hig/progress-bar-v1.1.0](https://github.com/Autodesk/hig/compare/@hig/progress-bar@1.0.3...@hig/progress-bar@1.1.0) (2019-09-25)
+
+
+### Features
+
+* add stylesheet prop for ProgressBar ([2ab671f](https://github.com/Autodesk/hig/commit/2ab671f))
+* allow className to be passed down to ProgressBar ([f79ed07](https://github.com/Autodesk/hig/commit/f79ed07))
+
 # [@hig/progress-bar-v1.0.3](https://github.com/Autodesk/hig/compare/@hig/progress-bar@1.0.2...@hig/progress-bar@1.0.3) (2019-03-13)
@@ -2,0 +10,0 @@

package.json

 {
   "name": "@hig/progress-bar",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "HIG Progress Bar",
@@ -24,4 +24,4 @@ "author": "Autodesk Inc.",
   "peerDependencies": {
-    "@hig/theme-context": "^2.1.3",
-    "@hig/theme-data": "^2.3.3",
+    "@hig/theme-context": "^3.0.0",
+    "@hig/theme-data": "^2.12.0",
     "react": "^15.4.1 || ^16.3.2"
@@ -28,0 +28,0 @@ },

README.md

@@ -26,1 +26,26 @@ # Progress Bar
 ```
+
+## Styling
+
+Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 
+
+ProgressBar also has a `stylesheet` prop that accepts a function wherein you can modify ProgressBar's styles. For instance
+
+```jsx
+import ProgressBar from '@hig/progress-bar';
+
+function YourComponent() {
+  // ...
+  const customStylesheet = (styles, themeData) => ({
+    ...styles,
+    wrapper: {
+      ...styles.wrapper,
+      backgroundColor: themeData["colorScheme.surfaceLevel100Color"]
+    }
+  });
+
+  return (
+    <ProgressBar stylesheet={customStylesheet} />
+  );
+}
+```

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

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

20834

increased by20.82%

Lines of code

356

increased by17.11%

Number of lines in readme file

51

increased by96.15%

No dependency changes