@hig/spacer - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

build/index.es.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeContext } from '@hig/theme-context';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 
@@ -18,14 +18,16 @@ var sizes = Object.freeze({
 
-function getSpacing(spacing, themeData) {
-  return themeData["density.spacings." + sizes[spacing]];
-}
+function stylesheet(props, themeData) {
+  var size = props.size,
+      spacing = props.spacing,
+      customStylsheet = props.stylesheet;
 
-function stylesheet(props, themeData) {
-  return {
+  var styles = {
     spacer: {
-      width: props.size ? props.size : getSpacing(props.spacing, themeData),
-      height: props.size ? props.size : getSpacing(props.spacing, themeData),
-      flex: props.size ? "0 0 " + props.size : "0 0 " + getSpacing(props.spacing, themeData)
+      width: size || themeData["density.spacings." + sizes[spacing]],
+      height: size || themeData["density.spacings." + sizes[spacing]],
+      flex: size ? "0 0 " + size : "0 0 " + themeData["density.spacings." + sizes[spacing]]
     }
   };
+
+  return customStylsheet ? customStylsheet(styles, props, themeData) : styles;
 }
@@ -35,2 +37,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"); } }
@@ -56,4 +60,8 @@
           size = _props.size,
-          spacing = _props.spacing;
+          spacing = _props.spacing,
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["size", "spacing", "stylesheet"]);
 
+      var className = otherProps.className;
+
       return React.createElement(
@@ -65,4 +73,4 @@ ThemeContext.Consumer,
 
-          var styles = stylesheet({ size: size, spacing: spacing }, resolvedRoles);
-          return React.createElement("div", { className: css(styles.spacer) });
+          var styles = stylesheet({ size: size, spacing: spacing, stylesheet: customStylesheet }, resolvedRoles);
+          return React.createElement("div", { className: cx([className, css(styles.spacer)]) });
         }
@@ -80,3 +88,5 @@ );
   /** Sets the size of the spacer */
-  spacing: PropTypes.oneOf(AVAILABLE_SIZES)
+  spacing: PropTypes.oneOf(AVAILABLE_SIZES),
+  /** Adds custom/overriding styles */
+  stylesheet: PropTypes.func
 };
@@ -109,2 +119,9 @@ Spacer.defaultProps = {
       }
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
     }
@@ -111,0 +128,0 @@ }

build/index.js

@@ -25,14 +25,16 @@ 'use strict';
 
-function getSpacing(spacing, themeData) {
-  return themeData["density.spacings." + sizes[spacing]];
-}
+function stylesheet(props, themeData) {
+  var size = props.size,
+      spacing = props.spacing,
+      customStylsheet = props.stylesheet;
 
-function stylesheet(props, themeData) {
-  return {
+  var styles = {
     spacer: {
-      width: props.size ? props.size : getSpacing(props.spacing, themeData),
-      height: props.size ? props.size : getSpacing(props.spacing, themeData),
-      flex: props.size ? "0 0 " + props.size : "0 0 " + getSpacing(props.spacing, themeData)
+      width: size || themeData["density.spacings." + sizes[spacing]],
+      height: size || themeData["density.spacings." + sizes[spacing]],
+      flex: size ? "0 0 " + size : "0 0 " + themeData["density.spacings." + sizes[spacing]]
     }
   };
+
+  return customStylsheet ? customStylsheet(styles, props, themeData) : styles;
 }
@@ -42,2 +44,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"); } }
@@ -63,4 +67,8 @@
           size = _props.size,
-          spacing = _props.spacing;
+          spacing = _props.spacing,
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["size", "spacing", "stylesheet"]);
 
+      var className = otherProps.className;
+
       return React__default.createElement(
@@ -72,4 +80,4 @@ themeContext.ThemeContext.Consumer,
 
-          var styles = stylesheet({ size: size, spacing: spacing }, resolvedRoles);
-          return React__default.createElement("div", { className: emotion.css(styles.spacer) });
+          var styles = stylesheet({ size: size, spacing: spacing, stylesheet: customStylesheet }, resolvedRoles);
+          return React__default.createElement("div", { className: emotion.cx([className, emotion.css(styles.spacer)]) });
         }
@@ -87,3 +95,5 @@ );
   /** Sets the size of the spacer */
-  spacing: PropTypes.oneOf(AVAILABLE_SIZES)
+  spacing: PropTypes.oneOf(AVAILABLE_SIZES),
+  /** Adds custom/overriding styles */
+  stylesheet: PropTypes.func
 };
@@ -116,2 +126,9 @@ Spacer.defaultProps = {
       }
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
     }
@@ -118,0 +135,0 @@ }

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/spacer-v1.1.0](https://github.com/Autodesk/hig/compare/@hig/spacer@1.0.8...@hig/spacer@1.1.0) (2021-02-24)
+
+
+### Features
+
+* add stylesheet prop, pass down className ([cdaaad3](https://github.com/Autodesk/hig/commit/cdaaad3))
+
 # [@hig/spacer-v1.0.8](https://github.com/Autodesk/hig/compare/@hig/spacer@1.0.7...@hig/spacer@1.0.8) (2019-07-11)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/spacer",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "HIG Spacer component",
@@ -31,4 +31,4 @@ "author": "Autodesk Inc.",
   "peerDependencies": {
-    "@hig/theme-context": "^3.0.0",
-    "@hig/theme-data": "^2.8.0",
+    "@hig/theme-context": "^3.0.1",
+    "@hig/theme-data": "^2.19.3",
     "react": "^15.4.1 || ^16.3.2"
@@ -35,0 +35,0 @@ },

README.md

@@ -22,1 +22,27 @@ # Spacer
 ```
+
+## 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. 
+
+Spacer also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance
+
+```jsx
+import Spacer from '@hig/spacer';
+
+function YourComponent() {
+  // ...
+  const customStylesheet = (styles, props, themeData) => ({
+    ...styles,
+    spacer: {
+      ...styles.spacer,
+      color: themeData["colorScheme.status.error"]
+    }
+  });
+
+  return (
+    <Spacer 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

14283

increased by19.92%

Lines of code

218

increased by14.74%

Number of lines in readme file

48

increased by118.18%

No dependency changes