@hig/avatar - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

build/index.es.js

@@ -5,2 +5,3 @@ import React, { Component } from 'react';
 import { ThemeContext } from '@hig/theme-context';
+import { createCustomClassNames } from '@hig/utils';
 
@@ -1593,2 +1594,3 @@ /*
 var _createEmotion = createEmotion(context),
+    cx = _createEmotion.cx,
     css = _createEmotion.css;
@@ -1661,2 +1663,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"); } }
@@ -1710,2 +1714,3 @@
       onError = _ref.onError,
+      className = _ref.className,
       resolvedRoles = _ref.resolvedRoles;
@@ -1716,7 +1721,12 @@
 
+  var imageWrapperClassName = createCustomClassNames(className, "image-wrapper");
+  var imageClassName = createCustomClassNames(className, "image");
+
   return React.createElement(
     "span",
-    { className: css(styles.avatar.imageWrapper) },
+    {
+      className: cx(css(styles.avatar.imageWrapper), imageWrapperClassName)
+    },
     React.createElement("img", {
-      className: css(styles.avatar.image),
+      className: cx(css(styles.avatar.image), imageClassName),
       src: image,
@@ -1738,2 +1748,3 @@ alt: alt,
       name = _ref2.name,
+      className = _ref2.className,
       resolvedRoles = _ref2.resolvedRoles;
@@ -1743,6 +1754,10 @@
   var initials = initialsFromName(name);
+  var initialsClassName = createCustomClassNames(className, "initials");
 
   return React.createElement(
     "span",
-    { className: css(styles.avatar.initials), "aria-hidden": "true" },
+    {
+      className: cx(css(styles.avatar.initials), initialsClassName),
+      "aria-hidden": "true"
+    },
     size === sizes.SMALL_16 ? initials[0] : initials
@@ -1803,3 +1818,6 @@ );
           size = _props.size,
-          name = _props.name;
+          name = _props.name,
+          otherProps = _objectWithoutProperties(_props, ["size", "name"]);
+
+      var className = otherProps.className;
       var _state = this.state,
@@ -1826,3 +1844,3 @@ imageUrl = _state.imageUrl,
               "aria-label": label,
-              className: css(styles(resolvedRoles).avatar.container),
+              className: cx(css(styles(resolvedRoles).avatar.container), className),
               role: "img"
@@ -1835,5 +1853,11 @@ },
               name: name,
+              className: className,
               onError: handleImageError
             }),
-            React.createElement(Initials, { name: name, size: size, resolvedRoles: resolvedRoles })
+            React.createElement(Initials, {
+              name: name,
+              size: size,
+              resolvedRoles: resolvedRoles,
+              className: className
+            })
           );
@@ -1840,0 +1864,0 @@ }

build/index.js

@@ -12,2 +12,3 @@ 'use strict';
 var themeContext = require('@hig/theme-context');
+var utils = require('@hig/utils');
 
@@ -1600,2 +1601,3 @@ /*
 var _createEmotion = createEmotion(context),
+    cx = _createEmotion.cx,
     css = _createEmotion.css;
@@ -1668,2 +1670,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"); } }
@@ -1717,2 +1721,3 @@
       onError = _ref.onError,
+      className = _ref.className,
       resolvedRoles = _ref.resolvedRoles;
@@ -1723,7 +1728,12 @@
 
+  var imageWrapperClassName = utils.createCustomClassNames(className, "image-wrapper");
+  var imageClassName = utils.createCustomClassNames(className, "image");
+
   return React__default.createElement(
     "span",
-    { className: css(styles.avatar.imageWrapper) },
+    {
+      className: cx(css(styles.avatar.imageWrapper), imageWrapperClassName)
+    },
     React__default.createElement("img", {
-      className: css(styles.avatar.image),
+      className: cx(css(styles.avatar.image), imageClassName),
       src: image,
@@ -1745,2 +1755,3 @@ alt: alt,
       name = _ref2.name,
+      className = _ref2.className,
       resolvedRoles = _ref2.resolvedRoles;
@@ -1750,6 +1761,10 @@
   var initials = initialsFromName(name);
+  var initialsClassName = utils.createCustomClassNames(className, "initials");
 
   return React__default.createElement(
     "span",
-    { className: css(styles.avatar.initials), "aria-hidden": "true" },
+    {
+      className: cx(css(styles.avatar.initials), initialsClassName),
+      "aria-hidden": "true"
+    },
     size === sizes.SMALL_16 ? initials[0] : initials
@@ -1810,3 +1825,6 @@ );
           size = _props.size,
-          name = _props.name;
+          name = _props.name,
+          otherProps = _objectWithoutProperties(_props, ["size", "name"]);
+
+      var className = otherProps.className;
       var _state = this.state,
@@ -1833,3 +1851,3 @@ imageUrl = _state.imageUrl,
               "aria-label": label,
-              className: css(styles(resolvedRoles).avatar.container),
+              className: cx(css(styles(resolvedRoles).avatar.container), className),
               role: "img"
@@ -1842,5 +1860,11 @@ },
               name: name,
+              className: className,
               onError: handleImageError
             }),
-            React__default.createElement(Initials, { name: name, size: size, resolvedRoles: resolvedRoles })
+            React__default.createElement(Initials, {
+              name: name,
+              size: size,
+              resolvedRoles: resolvedRoles,
+              className: className
+            })
           );
@@ -1847,0 +1871,0 @@ }

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/avatar-v1.1.0](https://github.com/Autodesk/hig/compare/@hig/avatar@1.0.6...@hig/avatar@1.1.0) (2019-10-10)
+
+
+### Features
+
+* allow className to be passed down to Avatar ([6b7c894](https://github.com/Autodesk/hig/commit/6b7c894))
+
 # [@hig/avatar-v1.0.6](https://github.com/Autodesk/hig/compare/@hig/avatar@1.0.5...@hig/avatar@1.0.6) (2019-03-20)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/avatar",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "HIG Avatar",
@@ -20,2 +20,3 @@ "author": "Autodesk Inc.",
   "dependencies": {
+    "@hig/utils": "^0.4.0",
     "prop-types": "^15.7.1",
@@ -25,4 +26,4 @@ "react-lifecycles-compat": "^3.0.4"
   "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"
@@ -29,0 +30,0 @@ },

README.md

@@ -31,1 +31,5 @@ # Avatar
 ```
+
+## Custom CSS
+
+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. 

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

118048

increased by2.06%

Lines of code

3221

increased by1.32%

Number of lines in readme file

35

increased by12.9%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@hig/utils@^0.4.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@3.0.3(transitive)

• + Added@hig/utils@0.4.1(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)

• + 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)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@10.0.27(transitive)

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

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedemotion@10.0.27(transitive)

• + Addederror-ex@1.3.2(transitive)

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

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

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

• + Addedjsesc@3.0.2(transitive)

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

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

• + Addedlodash.memoize@4.1.2(transitive)

• + Addedms@2.1.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)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsource-map@0.5.7(transitive)

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

• + Addedwarning@4.0.3(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removed@hig/theme-context@2.1.3(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-context@0.2.3(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)