@hig/avatar - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

build/index.es.js

@@ -1613,4 +1613,5 @@ import React, { Component } from 'react';
 function stylesheet(props, themeData) {
-  var size = props.size,
-      backgroundId = props.backgroundId;
+  var backgroundId = props.backgroundId,
+      size = props.size,
+      customStylesheet = props.stylesheet;
 
@@ -1624,36 +1625,36 @@ var sizeString = size ? SizeMapping[size] : SizeMapping[sizes.MEDIUM_32];
 
-  return {
-    avatar: {
-      container: {
-        backgroundColor: bgColor,
-        color: fgColor,
-        width: diameter,
-        height: diameter,
-        lineHeight: diameter,
-        fontSize: fontSize,
-        display: "block",
-        position: "relative",
-        margin: 0,
-        overflow: "hidden",
-        borderRadius: "50%",
-        textAlign: "center"
-      },
-      imageWrapper: {
-        position: "absolute",
-        display: "flex",
-        zIndex: "2",
-        fontSize: fontSize
-      },
-      image: {
-        borderRadius: "50%",
-        width: diameter,
-        height: diameter
-      },
-      initials: {
-        width: diameter,
-        height: diameter,
-        fontFamily: fontFamily
-      }
+  var styles = {
+    avatarContainer: {
+      backgroundColor: bgColor,
+      color: fgColor,
+      width: diameter,
+      height: diameter,
+      lineHeight: diameter,
+      fontSize: fontSize,
+      display: "block",
+      position: "relative",
+      margin: 0,
+      overflow: "hidden",
+      borderRadius: "50%",
+      textAlign: "center"
+    },
+    avatarImageWrapper: {
+      position: "absolute",
+      display: "flex",
+      zIndex: "2",
+      fontSize: fontSize
+    },
+    avatarImage: {
+      borderRadius: "50%",
+      width: diameter,
+      height: diameter
+    },
+    avatarInitials: {
+      width: diameter,
+      height: diameter,
+      fontFamily: fontFamily
     }
   };
+
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
@@ -1764,3 +1765,3 @@
  */
-// eslint-disable-next-line react/prop-types
+// eslint-disable-next-line react/prop-types, prettier/prettier
 function Image(_ref) {
@@ -1772,5 +1773,6 @@ var image = _ref.image,
       className = _ref.className,
-      resolvedRoles = _ref.resolvedRoles;
+      resolvedRoles = _ref.resolvedRoles,
+      customStylesheet = _ref.stylesheet;
 
-  var styles = stylesheet({ size: size }, resolvedRoles);
+  var styles = stylesheet({ size: size, stylesheet: customStylesheet }, resolvedRoles);
 
@@ -1782,7 +1784,5 @@ var imageWrapperClassName = createCustomClassNames(className, "image-wrapper");
     "span",
-    {
-      className: cx(css(styles.avatar.imageWrapper), imageWrapperClassName)
-    },
+    { className: cx(css(styles.avatarImageWrapper), imageWrapperClassName) },
     React.createElement("img", {
-      className: cx(css(styles.avatar.image), imageClassName),
+      className: cx(css(styles.avatarImage), imageClassName),
       src: image,
@@ -1802,3 +1802,3 @@ alt: alt,
  */
-// eslint-disable-next-line react/prop-types
+// eslint-disable-next-line react/prop-types, prettier/prettier
 function Initials(_ref2) {
@@ -1808,5 +1808,6 @@ var size = _ref2.size,
       className = _ref2.className,
-      resolvedRoles = _ref2.resolvedRoles;
+      resolvedRoles = _ref2.resolvedRoles,
+      customStylesheet = _ref2.stylesheet;
 
-  var styles = stylesheet({ size: size }, resolvedRoles);
+  var styles = stylesheet({ size: size, stylesheet: customStylesheet }, resolvedRoles);
   var initials = initialsFromName(name);
@@ -1818,3 +1819,3 @@ var initialsClassName = createCustomClassNames(className, "initials");
     {
-      className: cx(css(styles.avatar.initials), initialsClassName),
+      className: cx(css(styles.avatarInitials), initialsClassName),
       "aria-hidden": "true"
@@ -1880,3 +1881,4 @@ },
           lastName = _props.lastName,
-          otherProps = _objectWithoutProperties(_props, ["size", "name", "firstName", "lastName"]);
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["size", "name", "firstName", "lastName", "stylesheet"]);
 
@@ -1901,3 +1903,3 @@ var className = otherProps.className;
       var styles = function styles(roles) {
-        return stylesheet({ size: size, backgroundId: backgroundId }, roles);
+        return stylesheet({ size: size, backgroundId: backgroundId, stylesheet: customStylesheet }, roles);
       };
@@ -1914,3 +1916,3 @@
               "aria-label": label,
-              className: cx(css(styles(resolvedRoles).avatar.container), className),
+              className: cx(css(styles(resolvedRoles).avatarContainer), className),
               role: "img"
@@ -1924,3 +1926,4 @@ },
               onError: handleImageError,
-              alt: imageAlt
+              alt: imageAlt,
+              stylesheet: customStylesheet
             }),
@@ -1931,3 +1934,4 @@ React.createElement(Initials, {
               resolvedRoles: resolvedRoles,
-              className: className
+              className: className,
+              stylesheet: customStylesheet
             })
@@ -1988,3 +1992,5 @@ );
   /** Optional alt message override for Avatar Image  */
-  imageAlt: PropTypes.string
+  imageAlt: PropTypes.string,
+  /** Function to modify the component's styles */
+  stylesheet: PropTypes.func
 };
@@ -2067,2 +2073,9 @@ Avatar.defaultProps = {
       "description": "Optional alt message override for Avatar Image"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function to modify the component's styles"
     }
@@ -2069,0 +2082,0 @@ }

build/index.js

@@ -1620,4 +1620,5 @@ 'use strict';
 function stylesheet(props, themeData) {
-  var size = props.size,
-      backgroundId = props.backgroundId;
+  var backgroundId = props.backgroundId,
+      size = props.size,
+      customStylesheet = props.stylesheet;
 
@@ -1631,36 +1632,36 @@ var sizeString = size ? SizeMapping[size] : SizeMapping[sizes.MEDIUM_32];
 
-  return {
-    avatar: {
-      container: {
-        backgroundColor: bgColor,
-        color: fgColor,
-        width: diameter,
-        height: diameter,
-        lineHeight: diameter,
-        fontSize: fontSize,
-        display: "block",
-        position: "relative",
-        margin: 0,
-        overflow: "hidden",
-        borderRadius: "50%",
-        textAlign: "center"
-      },
-      imageWrapper: {
-        position: "absolute",
-        display: "flex",
-        zIndex: "2",
-        fontSize: fontSize
-      },
-      image: {
-        borderRadius: "50%",
-        width: diameter,
-        height: diameter
-      },
-      initials: {
-        width: diameter,
-        height: diameter,
-        fontFamily: fontFamily
-      }
+  var styles = {
+    avatarContainer: {
+      backgroundColor: bgColor,
+      color: fgColor,
+      width: diameter,
+      height: diameter,
+      lineHeight: diameter,
+      fontSize: fontSize,
+      display: "block",
+      position: "relative",
+      margin: 0,
+      overflow: "hidden",
+      borderRadius: "50%",
+      textAlign: "center"
+    },
+    avatarImageWrapper: {
+      position: "absolute",
+      display: "flex",
+      zIndex: "2",
+      fontSize: fontSize
+    },
+    avatarImage: {
+      borderRadius: "50%",
+      width: diameter,
+      height: diameter
+    },
+    avatarInitials: {
+      width: diameter,
+      height: diameter,
+      fontFamily: fontFamily
     }
   };
+
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
@@ -1771,3 +1772,3 @@
  */
-// eslint-disable-next-line react/prop-types
+// eslint-disable-next-line react/prop-types, prettier/prettier
 function Image(_ref) {
@@ -1779,5 +1780,6 @@ var image = _ref.image,
       className = _ref.className,
-      resolvedRoles = _ref.resolvedRoles;
+      resolvedRoles = _ref.resolvedRoles,
+      customStylesheet = _ref.stylesheet;
 
-  var styles = stylesheet({ size: size }, resolvedRoles);
+  var styles = stylesheet({ size: size, stylesheet: customStylesheet }, resolvedRoles);
 
@@ -1789,7 +1791,5 @@ var imageWrapperClassName = utils.createCustomClassNames(className, "image-wrapper");
     "span",
-    {
-      className: cx(css(styles.avatar.imageWrapper), imageWrapperClassName)
-    },
+    { className: cx(css(styles.avatarImageWrapper), imageWrapperClassName) },
     React__default.createElement("img", {
-      className: cx(css(styles.avatar.image), imageClassName),
+      className: cx(css(styles.avatarImage), imageClassName),
       src: image,
@@ -1809,3 +1809,3 @@ alt: alt,
  */
-// eslint-disable-next-line react/prop-types
+// eslint-disable-next-line react/prop-types, prettier/prettier
 function Initials(_ref2) {
@@ -1815,5 +1815,6 @@ var size = _ref2.size,
       className = _ref2.className,
-      resolvedRoles = _ref2.resolvedRoles;
+      resolvedRoles = _ref2.resolvedRoles,
+      customStylesheet = _ref2.stylesheet;
 
-  var styles = stylesheet({ size: size }, resolvedRoles);
+  var styles = stylesheet({ size: size, stylesheet: customStylesheet }, resolvedRoles);
   var initials = initialsFromName(name);
@@ -1825,3 +1826,3 @@ var initialsClassName = utils.createCustomClassNames(className, "initials");
     {
-      className: cx(css(styles.avatar.initials), initialsClassName),
+      className: cx(css(styles.avatarInitials), initialsClassName),
       "aria-hidden": "true"
@@ -1887,3 +1888,4 @@ },
           lastName = _props.lastName,
-          otherProps = _objectWithoutProperties(_props, ["size", "name", "firstName", "lastName"]);
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["size", "name", "firstName", "lastName", "stylesheet"]);
 
@@ -1908,3 +1910,3 @@ var className = otherProps.className;
       var styles = function styles(roles) {
-        return stylesheet({ size: size, backgroundId: backgroundId }, roles);
+        return stylesheet({ size: size, backgroundId: backgroundId, stylesheet: customStylesheet }, roles);
       };
@@ -1921,3 +1923,3 @@
               "aria-label": label,
-              className: cx(css(styles(resolvedRoles).avatar.container), className),
+              className: cx(css(styles(resolvedRoles).avatarContainer), className),
               role: "img"
@@ -1931,3 +1933,4 @@ },
               onError: handleImageError,
-              alt: imageAlt
+              alt: imageAlt,
+              stylesheet: customStylesheet
             }),
@@ -1938,3 +1941,4 @@ React__default.createElement(Initials, {
               resolvedRoles: resolvedRoles,
-              className: className
+              className: className,
+              stylesheet: customStylesheet
             })
@@ -1995,3 +1999,5 @@ );
   /** Optional alt message override for Avatar Image  */
-  imageAlt: PropTypes.string
+  imageAlt: PropTypes.string,
+  /** Function to modify the component's styles */
+  stylesheet: PropTypes.func
 };
@@ -2074,2 +2080,9 @@ Avatar.defaultProps = {
       "description": "Optional alt message override for Avatar Image"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function to modify the component's styles"
     }
@@ -2076,0 +2089,0 @@ }

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/avatar-v1.3.0](https://github.com/Autodesk/hig/compare/@hig/avatar@1.2.0...@hig/avatar@1.3.0) (2021-02-02)
+
+
+### Features
+
+* add stylesheet prop ([4465d6a](https://github.com/Autodesk/hig/commit/4465d6a))
+
 # [@hig/avatar-v1.2.0](https://github.com/Autodesk/hig/compare/@hig/avatar@1.1.1...@hig/avatar@1.2.0) (2020-12-03)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/avatar",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "HIG Avatar",
@@ -26,3 +26,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-context": "^3.0.1",
-    "@hig/theme-data": "^2.18.0",
+    "@hig/theme-data": "^2.19.3",
     "react": "^15.4.1 || ^16.3.2"
@@ -29,0 +29,0 @@ },

README.md

@@ -32,4 +32,37 @@ # Avatar
 
-## Custom CSS
+## 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. 
+
+Avatar also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance
+
+```jsx
+import Avatar from '@hig/avatar';
+
+function YourComponent() {
+  // ...
+  const customStylesheet = (styles, props, themeData) => ({
+    ...styles,
+    avatarContainer: {
+      ...styles.avatarContainer,
+      color: themeData["colorScheme.status.error"]
+    },
+    avatarImageWrapper: {
+      ...styles.avatarImageWrapper,
+      opacity: 1
+    },
+    avatarImage: {
+      ...styles.avatarImage,
+      padding: `4px`
+    },
+    avatarInitials: {
+      ...styles.avatarInitials,
+      position: `static`
+    }
+  });
+
+  return (
+    <Avatar 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

127062

increased by1.8%

Lines of code

3439

increased by0.7%

Number of lines in readme file

68

increased by94.29%

No dependency changes