@kyper/avatar - npm Package Compare versions

Comparing version 1.0.4 to 2.0.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+## [2.0.0](https://gitlab.mx.com/mx/kyper-react/-/commits/@kyper/avatar@2.0.0) - 10-12-2021
+
+- **ADDED** - Add kyper-avatar className
+- **CHANGED** - Use new icon import method to help shrink bundle size
+- **REMOVED** - Replace glamor with our @mxenabled/cssinjs wrapper
+
+## [1.0.5](https://gitlab.mx.com/mx/kyper-react/-/commits/@kyper/avatar@1.0.5) - 02-09-2021
+
+- **ADDED** - New design for figma link and live demo link added to usage page
+
 ## [1.0.4](https://gitlab.mx.com/mx/kyper-react/-/commits/@kyper/avatar@1.0.4) - 01-05-2021
@@ -2,0 +12,0 @@

lib/Avatar.js

 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { css } from 'glamor'
+import { css } from '@mxenabled/cssinjs'
 import { useTokens } from '@kyper/tokenprovider'
-import { Unlink, Image } from '@kyper/icon'
+import { Unlink } from '@kyper/icon/Unlink'
+import { Image } from '@kyper/icon/Image'
 
@@ -28,3 +29,3 @@ export const Avatar = ({ children, className = '', src, size = 16, alt, ...rest }) => {
       <div
-        className={`${styles} avatar-${size}`}
+        className={`${css(styles)} avatar-${size}`}
         role="image"
@@ -40,3 +41,3 @@ {...rest}
   return (
-    <div className={`${styles} avatar-${size} ${className}`} {...rest}>
+    <div className={`${css(styles)} avatar-${size} kyper-avatar ${className}`} {...rest}>
       {!children && src && <img alt={alt} onError={() => setError(true)} src={src} />}
@@ -49,35 +50,34 @@ {children && !src && children}
 
-const getStyles = (tokens, size) =>
-  css({
-    width: size,
-    height: size,
-    lineHeight: tokens.LineHeight.Small,
-    backgroundColor: tokens.BackgroundColor.Avatar,
-    textAlign: 'center',
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '50%',
+const getStyles = (tokens, size) => ({
+  width: size,
+  height: size,
+  lineHeight: tokens.LineHeight.Small,
+  backgroundColor: tokens.BackgroundColor.Avatar,
+  textAlign: 'center',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '50%',
+  fontSize: tokens.FontSize.Tiny,
+  fontWeight: tokens.FontWeight.Bold,
+  color: tokens.TextColor.Avatar,
+  overflow: 'hidden',
+  '> img': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+  '&.avatar-16': {
     fontSize: tokens.FontSize.Tiny,
-    fontWeight: tokens.FontWeight.Bold,
-    color: tokens.TextColor.Avatar,
-    overflow: 'hidden',
-    '> img': {
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover',
-    },
-    '.avatar-16': {
-      fontSize: tokens.FontSize.Tiny,
-    },
-    '.avatar-24': {
-      fontSize: tokens.FontSize.Body,
-    },
-    '.avatar-32': {
-      fontSize: tokens.FontSize.H3,
-    },
-    '.avatar-44': {
-      fontSize: tokens.FontSize.H2,
-    },
-  })
+  },
+  '&.avatar-24': {
+    fontSize: tokens.FontSize.Body,
+  },
+  '&.avatar-32': {
+    fontSize: tokens.FontSize.H3,
+  },
+  '&.avatar-44': {
+    fontSize: tokens.FontSize.H2,
+  },
+})
 
@@ -84,0 +84,0 @@ Avatar.propTypes = {

package.json

 {
   "name": "@kyper/avatar",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "Avatar",
@@ -27,11 +27,11 @@ "author": "MX",
   "peerDependencies": {
-    "@kyper/icon": "^1.0.0",
-    "@kyper/tokenprovider": "^1.0.0",
-    "glamor": "^2.20.40",
-    "mx-design-tokens": "^6.0.2",
+    "@kyper/icon": "^1.7.0",
+    "@kyper/tokenprovider": "^3.0.0",
+    "@mxenabled/cssinjs": "^0.6.0",
+    "mx-design-tokens": "^10.0.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
-  "gitHead": "f069a2b8923224b70405a8785ea2a84fd26e07fa"
+  "gitHead": "1ff4231b12810a89e86d0d94aaa0afe36e72908f"
 }

No alert changes

Improved metrics

Total package byte prevSize

4234

increased by12.49%

No dependency changes