@contentful/f36-avatar - npm Package Compare versions

Comparing version 4.0.0-alpha.2 to 4.0.0-alpha.3

dist/esm/index.js

@@ -1,11 +0,11 @@
-import t, { forwardRef } from 'react';
+import n, { forwardRef } from 'react';
 import { cx, css } from 'emotion';
 import { Image } from '@contentful/f36-image';
-import r from '@contentful/f36-tokens';
-import { Flex } from '@contentful/f36-core';
+import u from '@contentful/f36-tokens';
+import { Stack } from '@contentful/f36-core';
 import { Menu } from '@contentful/f36-menu';
 
-var x=e=>({tiny:"20px",small:"24px",medium:"32px",large:"48px"})[e],S=({isFallback:e,size:d,variant:a})=>{let o=a==="app"?r.borderRadiusSmall:"99999999em",i=x(d);return {fallback:css({backgroundColor:r.gray200,height:"100%",width:"100%"}),image:css({borderRadius:o,display:"block"}),root:css([{borderRadius:o,height:i,overflow:"hidden",position:"relative",width:i},!e&&{"&::after":{boxShadow:"inset 0px 0px 0px 1px rgba(17, 27, 43, 0.1)",borderRadius:o,bottom:0,content:'""',display:"block",left:0,position:"absolute",top:0,right:0}}]),rootColorBorder:css({":nth-child(6n+1)::after":{boxShadow:`0px 0px 0px 2px ${r.green400} inset`},":nth-child(6n+2)::after":{boxShadow:`0px 0px 0px 2px ${r.red400} inset`},":nth-child(6n+3)::after":{boxShadow:`0px 0px 0px 2px ${r.orange400} inset`},":nth-child(6n+4)::after":{boxShadow:`0px 0px 0px 2px ${r.yellow400} inset`},":nth-child(6n+5)::after":{boxShadow:`0px 0px 0px 2px ${r.purple400} inset`},":nth-child(6n+6)::after":{boxShadow:`0px 0px 0px 2px ${r.gray400} inset`}}),isPrimaryAvatar:css({"&::after":{boxShadow:`0px 0px 0px 2px ${r.blue400} inset !important`}}),imageContainer:css({overflow:"visible",zIndex:1}),overlayIcon:css({svg:{backgroundColor:r.colorWhite,borderRadius:"99999999em",position:"absolute",bottom:0,right:"-10%",width:"40%",height:"40%",zIndex:1}}),isInactive:css({opacity:.5})}};function G({alt:e="",className:d,isLoading:a=!1,size:o="medium",src:i,testId:f="cf-ui-avatar",variant:p="user",showColorBorder:v=!1,isPrimary:u=!1,isActive:A=!0,icon:l=null},m){let c=Boolean(!a&&!i),s=S({isFallback:c,size:o,variant:p}),P=x(o);return t.createElement("div",{className:cx(s.root,d,{[s.rootColorBorder]:v,[s.isPrimaryAvatar]:u,[s.imageContainer]:l!==null,[s.isInactive]:!A}),"data-test-id":f,ref:m},c?t.createElement("div",{className:s.fallback,"data-test-id":`${f}-fallback`}):t.createElement(Image,{alt:e,className:s.image,height:P,src:i,width:P}),l!==null&&t.createElement("span",{className:s.overlayIcon},l))}var w=forwardRef(G);var k=e=>({avatarSpaced:css({margin:"0 2px"}),avatarStacked:css({margin:"0 -2px",position:"relative",boxShadow:`0px 0px 0px 2px ${r.colorWhite}`,"&:first-child":{zIndex:2},":nth-child(2)":{zIndex:1}}),moreAvatarsBtn:css({cursor:"pointer",backgroundColor:r.colorWhite,border:"none",boxShadow:`0px 0px 0px 1px ${r.gray200} inset`,borderRadius:"99999999em",height:x(e),width:x(e),overflow:"hidden",zIndex:0}),moreAvatarsItem:css({cursor:"default"})});function T({children:e,size:d="medium",variant:a="spaced",testId:o="cf-ui-avatar-group",className:i},f){let p=k(d),v=t.Children.toArray(e),u=v.length>3?2:3,A=v.slice(0,u),l=v.slice(u);return t.createElement(Flex,{flexDirection:"row",testId:o,ref:f,className:i},A.map((m,c)=>t.cloneElement(m,{key:`avatar-rendered-${c}`,size:d,className:cx(m.props.className,{[p.avatarStacked]:a==="stacked",[p.avatarSpaced]:a==="spaced"})})),l.length>0&&t.createElement(Menu,{placement:"bottom-end"},t.createElement(Menu.Trigger,null,t.createElement("button",{type:"button",className:cx({[p.avatarStacked]:a==="stacked",[p.avatarSpaced]:a==="spaced"},p.moreAvatarsBtn)},l.length)),t.createElement(Menu.List,null,l.map((m,c)=>t.createElement(Menu.Item,{className:p.moreAvatarsItem,key:`avatar-${c}`},t.cloneElement(m,{key:`avatar-menuitem-${c}`,size:"tiny"}),m.props.alt)))))}var R=forwardRef(T);
+var M=Object.defineProperty;var h=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var z=(r,t,e)=>t in r?M(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e,b=(r,t)=>{for(var e in t||(t={}))R.call(t,e)&&z(r,e,t[e]);if(h)for(var e of h(t))I.call(t,e)&&z(r,e,t[e]);return r};var G=(r,t)=>{var e={};for(var o in r)R.call(r,o)&&t.indexOf(o)<0&&(e[o]=r[o]);if(r!=null&&h)for(var o of h(r))t.indexOf(o)<0&&I.call(r,o)&&(e[o]=r[o]);return e};var E={primary:"blue400",green:"green400",red:"red400",orange:"orange400",yellow:"yellow500",purple:"purple400",gray:"gray400"};var L=r=>{let t=E[r];return {boxShadow:`0px 0px 0px 2px  ${u[t]} inset, 0px 0px 0px 3px  ${u.colorWhite} inset`}},v=r=>({tiny:"20px",small:"24px",medium:"32px",large:"48px"})[r],T=({isFallback:r,size:t,variant:e,colorVariant:o})=>{let a=e==="app"?u.borderRadiusSmall:"99999999em",m=v(t);return {fallback:css({backgroundColor:u.gray200,height:"100%",width:"100%"}),image:css({borderRadius:a,display:"block"}),root:css([{borderRadius:a,height:m,overflow:"hidden",position:"relative",width:m},!r&&{"&::after":{boxShadow:"inset 0px 0px 0px 1px rgba(17, 27, 43, 0.1)",borderRadius:a,bottom:0,content:'""',display:"block",left:0,position:"absolute",top:0,right:0}}]),colorBorder:css({"&::after":b({},L(o))}),imageContainer:css({overflow:"visible",zIndex:1}),overlayIcon:css({svg:{backgroundColor:u.colorWhite,borderRadius:"99999999em",position:"absolute",bottom:0,right:"-10%",width:"40%",height:"40%",zIndex:1}}),isInactive:css({opacity:.5})}};function F(A,y){var i=A,{alt:r="",className:t,isLoading:e=!1,size:o="medium",src:a,testId:m="cf-ui-avatar",variant:S="user",colorVariant:p,icon:c=null}=i,g=G(i,["alt","className","isLoading","size","src","testId","variant","colorVariant","icon"]);let l=Boolean(!e&&!a),s=T({isFallback:l,size:o,variant:S,colorVariant:p}),w=v(o);return n.createElement("div",b({className:cx(s.root,t,{[s.imageContainer]:c!==null,[s.isInactive]:p==="muted",[s.colorBorder]:!!p}),"data-test-id":m,ref:y},g),l?n.createElement("div",{className:s.fallback,"data-test-id":`${m}-fallback`}):n.createElement(Image,{alt:r,className:s.image,height:w,src:a,width:w}),c!==null&&n.createElement("span",{className:s.overlayIcon},c))}var V=forwardRef(F);var N=r=>({groupSpaced:css({gap:u.spacing2Xs}),groupStacked:css({gap:0}),avatarStacked:css({position:"relative",boxShadow:`0px 0px 0px 2px ${u.colorWhite}`,"&:not(:first-child)":{marginLeft:`-${u.spacing2Xs}`}}),moreAvatarsBtn:css({cursor:"pointer",backgroundColor:u.colorWhite,color:u.gray600,fontSize:u.fontSizeS,border:"none",boxShadow:`0px 0px 0px 1px ${u.gray200} inset`,borderRadius:"99999999em",height:v(r),width:v(r),overflow:"hidden",zIndex:0}),moreAvatarsItem:css({cursor:"default"})});function _({children:r,size:t="medium",variant:e="spaced",testId:o="cf-ui-avatar-group",maxVisibleChildren:a=3,className:m},S){let p=N(t),c=n.Children.toArray(r),g=c.length>a?a-1:a,y=c.slice(0,g),A=c.slice(g);return n.createElement(Stack,{flexDirection:"row",testId:o,ref:S,className:cx(m,{[p.groupStacked]:e==="stacked",[p.groupSpaced]:e==="spaced"})},y.map((i,l)=>{let s=y.length-l;return n.cloneElement(i,{key:`avatar-rendered-${l}`,size:t,className:cx(i.props.className,{[p.avatarStacked]:e==="stacked"}),style:{zIndex:s}})}),A.length>0&&n.createElement(Menu,{placement:"bottom-end"},n.createElement(Menu.Trigger,null,n.createElement("button",{type:"button",className:cx({[p.avatarStacked]:e==="stacked"},p.moreAvatarsBtn)},A.length)),n.createElement(Menu.List,null,A.map((i,l)=>n.createElement(Menu.Item,{className:p.moreAvatarsItem,key:`avatar-${l}`},n.cloneElement(i,{key:`avatar-menuitem-${l}`,size:"tiny"}),i.props.alt)))))}var $=forwardRef(_);
 
-export { w as Avatar, R as AvatarGroup };
+export { V as Avatar, $ as AvatarGroup };
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -5,2 +5,4 @@ import React from 'react';
 
+declare type ColorVariant = 'primary' | 'muted' | 'green' | 'red' | 'orange' | 'yellow' | 'purple' | 'gray';
+
 declare type Size = 'tiny' | 'small' | 'medium' | 'large';
@@ -14,5 +16,3 @@ declare type Variant = 'app' | 'user';
     variant?: Variant;
-    showColorBorder?: boolean;
-    isPrimary?: boolean;
-    isActive?: boolean;
+    colorVariant?: ColorVariant;
     icon?: React.ReactElement;
@@ -23,2 +23,3 @@ }
 interface AvatarGroupProps extends CommonProps {
+    maxVisibleChildren?: number;
     size?: 'small' | 'medium';
@@ -25,0 +26,0 @@ variant?: 'stacked' | 'spaced';

dist/index.js

@@ -5,6 +5,6 @@ 'use strict';
 
-var t = require('react');
+var n = require('react');
 var emotion = require('emotion');
 var f36Image = require('@contentful/f36-image');
-var r = require('@contentful/f36-tokens');
+var u = require('@contentful/f36-tokens');
 var f36Core = require('@contentful/f36-core');
@@ -15,9 +15,9 @@ var f36Menu = require('@contentful/f36-menu');
 
-var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
-var r__default = /*#__PURE__*/_interopDefaultLegacy(r);
+var n__default = /*#__PURE__*/_interopDefaultLegacy(n);
+var u__default = /*#__PURE__*/_interopDefaultLegacy(u);
 
-var x=e=>({tiny:"20px",small:"24px",medium:"32px",large:"48px"})[e],S=({isFallback:e,size:d,variant:a})=>{let o=a==="app"?r__default["default"].borderRadiusSmall:"99999999em",i=x(d);return {fallback:emotion.css({backgroundColor:r__default["default"].gray200,height:"100%",width:"100%"}),image:emotion.css({borderRadius:o,display:"block"}),root:emotion.css([{borderRadius:o,height:i,overflow:"hidden",position:"relative",width:i},!e&&{"&::after":{boxShadow:"inset 0px 0px 0px 1px rgba(17, 27, 43, 0.1)",borderRadius:o,bottom:0,content:'""',display:"block",left:0,position:"absolute",top:0,right:0}}]),rootColorBorder:emotion.css({":nth-child(6n+1)::after":{boxShadow:`0px 0px 0px 2px ${r__default["default"].green400} inset`},":nth-child(6n+2)::after":{boxShadow:`0px 0px 0px 2px ${r__default["default"].red400} inset`},":nth-child(6n+3)::after":{boxShadow:`0px 0px 0px 2px ${r__default["default"].orange400} inset`},":nth-child(6n+4)::after":{boxShadow:`0px 0px 0px 2px ${r__default["default"].yellow400} inset`},":nth-child(6n+5)::after":{boxShadow:`0px 0px 0px 2px ${r__default["default"].purple400} inset`},":nth-child(6n+6)::after":{boxShadow:`0px 0px 0px 2px ${r__default["default"].gray400} inset`}}),isPrimaryAvatar:emotion.css({"&::after":{boxShadow:`0px 0px 0px 2px ${r__default["default"].blue400} inset !important`}}),imageContainer:emotion.css({overflow:"visible",zIndex:1}),overlayIcon:emotion.css({svg:{backgroundColor:r__default["default"].colorWhite,borderRadius:"99999999em",position:"absolute",bottom:0,right:"-10%",width:"40%",height:"40%",zIndex:1}}),isInactive:emotion.css({opacity:.5})}};function G({alt:e="",className:d,isLoading:a=!1,size:o="medium",src:i,testId:f="cf-ui-avatar",variant:p="user",showColorBorder:v=!1,isPrimary:u=!1,isActive:A=!0,icon:l=null},m){let c=Boolean(!a&&!i),s=S({isFallback:c,size:o,variant:p}),P=x(o);return t__default["default"].createElement("div",{className:emotion.cx(s.root,d,{[s.rootColorBorder]:v,[s.isPrimaryAvatar]:u,[s.imageContainer]:l!==null,[s.isInactive]:!A}),"data-test-id":f,ref:m},c?t__default["default"].createElement("div",{className:s.fallback,"data-test-id":`${f}-fallback`}):t__default["default"].createElement(f36Image.Image,{alt:e,className:s.image,height:P,src:i,width:P}),l!==null&&t__default["default"].createElement("span",{className:s.overlayIcon},l))}var w=t.forwardRef(G);var k=e=>({avatarSpaced:emotion.css({margin:"0 2px"}),avatarStacked:emotion.css({margin:"0 -2px",position:"relative",boxShadow:`0px 0px 0px 2px ${r__default["default"].colorWhite}`,"&:first-child":{zIndex:2},":nth-child(2)":{zIndex:1}}),moreAvatarsBtn:emotion.css({cursor:"pointer",backgroundColor:r__default["default"].colorWhite,border:"none",boxShadow:`0px 0px 0px 1px ${r__default["default"].gray200} inset`,borderRadius:"99999999em",height:x(e),width:x(e),overflow:"hidden",zIndex:0}),moreAvatarsItem:emotion.css({cursor:"default"})});function T({children:e,size:d="medium",variant:a="spaced",testId:o="cf-ui-avatar-group",className:i},f){let p=k(d),v=t__default["default"].Children.toArray(e),u=v.length>3?2:3,A=v.slice(0,u),l=v.slice(u);return t__default["default"].createElement(f36Core.Flex,{flexDirection:"row",testId:o,ref:f,className:i},A.map((m,c)=>t__default["default"].cloneElement(m,{key:`avatar-rendered-${c}`,size:d,className:emotion.cx(m.props.className,{[p.avatarStacked]:a==="stacked",[p.avatarSpaced]:a==="spaced"})})),l.length>0&&t__default["default"].createElement(f36Menu.Menu,{placement:"bottom-end"},t__default["default"].createElement(f36Menu.Menu.Trigger,null,t__default["default"].createElement("button",{type:"button",className:emotion.cx({[p.avatarStacked]:a==="stacked",[p.avatarSpaced]:a==="spaced"},p.moreAvatarsBtn)},l.length)),t__default["default"].createElement(f36Menu.Menu.List,null,l.map((m,c)=>t__default["default"].createElement(f36Menu.Menu.Item,{className:p.moreAvatarsItem,key:`avatar-${c}`},t__default["default"].cloneElement(m,{key:`avatar-menuitem-${c}`,size:"tiny"}),m.props.alt)))))}var R=t.forwardRef(T);
+var M=Object.defineProperty;var h=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var z=(r,t,e)=>t in r?M(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e,b=(r,t)=>{for(var e in t||(t={}))R.call(t,e)&&z(r,e,t[e]);if(h)for(var e of h(t))I.call(t,e)&&z(r,e,t[e]);return r};var G=(r,t)=>{var e={};for(var o in r)R.call(r,o)&&t.indexOf(o)<0&&(e[o]=r[o]);if(r!=null&&h)for(var o of h(r))t.indexOf(o)<0&&I.call(r,o)&&(e[o]=r[o]);return e};var E={primary:"blue400",green:"green400",red:"red400",orange:"orange400",yellow:"yellow500",purple:"purple400",gray:"gray400"};var L=r=>{let t=E[r];return {boxShadow:`0px 0px 0px 2px  ${u__default["default"][t]} inset, 0px 0px 0px 3px  ${u__default["default"].colorWhite} inset`}},v=r=>({tiny:"20px",small:"24px",medium:"32px",large:"48px"})[r],T=({isFallback:r,size:t,variant:e,colorVariant:o})=>{let a=e==="app"?u__default["default"].borderRadiusSmall:"99999999em",m=v(t);return {fallback:emotion.css({backgroundColor:u__default["default"].gray200,height:"100%",width:"100%"}),image:emotion.css({borderRadius:a,display:"block"}),root:emotion.css([{borderRadius:a,height:m,overflow:"hidden",position:"relative",width:m},!r&&{"&::after":{boxShadow:"inset 0px 0px 0px 1px rgba(17, 27, 43, 0.1)",borderRadius:a,bottom:0,content:'""',display:"block",left:0,position:"absolute",top:0,right:0}}]),colorBorder:emotion.css({"&::after":b({},L(o))}),imageContainer:emotion.css({overflow:"visible",zIndex:1}),overlayIcon:emotion.css({svg:{backgroundColor:u__default["default"].colorWhite,borderRadius:"99999999em",position:"absolute",bottom:0,right:"-10%",width:"40%",height:"40%",zIndex:1}}),isInactive:emotion.css({opacity:.5})}};function F(A,y){var i=A,{alt:r="",className:t,isLoading:e=!1,size:o="medium",src:a,testId:m="cf-ui-avatar",variant:S="user",colorVariant:p,icon:c=null}=i,g=G(i,["alt","className","isLoading","size","src","testId","variant","colorVariant","icon"]);let l=Boolean(!e&&!a),s=T({isFallback:l,size:o,variant:S,colorVariant:p}),w=v(o);return n__default["default"].createElement("div",b({className:emotion.cx(s.root,t,{[s.imageContainer]:c!==null,[s.isInactive]:p==="muted",[s.colorBorder]:!!p}),"data-test-id":m,ref:y},g),l?n__default["default"].createElement("div",{className:s.fallback,"data-test-id":`${m}-fallback`}):n__default["default"].createElement(f36Image.Image,{alt:r,className:s.image,height:w,src:a,width:w}),c!==null&&n__default["default"].createElement("span",{className:s.overlayIcon},c))}var V=n.forwardRef(F);var N=r=>({groupSpaced:emotion.css({gap:u__default["default"].spacing2Xs}),groupStacked:emotion.css({gap:0}),avatarStacked:emotion.css({position:"relative",boxShadow:`0px 0px 0px 2px ${u__default["default"].colorWhite}`,"&:not(:first-child)":{marginLeft:`-${u__default["default"].spacing2Xs}`}}),moreAvatarsBtn:emotion.css({cursor:"pointer",backgroundColor:u__default["default"].colorWhite,color:u__default["default"].gray600,fontSize:u__default["default"].fontSizeS,border:"none",boxShadow:`0px 0px 0px 1px ${u__default["default"].gray200} inset`,borderRadius:"99999999em",height:v(r),width:v(r),overflow:"hidden",zIndex:0}),moreAvatarsItem:emotion.css({cursor:"default"})});function _({children:r,size:t="medium",variant:e="spaced",testId:o="cf-ui-avatar-group",maxVisibleChildren:a=3,className:m},S){let p=N(t),c=n__default["default"].Children.toArray(r),g=c.length>a?a-1:a,y=c.slice(0,g),A=c.slice(g);return n__default["default"].createElement(f36Core.Stack,{flexDirection:"row",testId:o,ref:S,className:emotion.cx(m,{[p.groupStacked]:e==="stacked",[p.groupSpaced]:e==="spaced"})},y.map((i,l)=>{let s=y.length-l;return n__default["default"].cloneElement(i,{key:`avatar-rendered-${l}`,size:t,className:emotion.cx(i.props.className,{[p.avatarStacked]:e==="stacked"}),style:{zIndex:s}})}),A.length>0&&n__default["default"].createElement(f36Menu.Menu,{placement:"bottom-end"},n__default["default"].createElement(f36Menu.Menu.Trigger,null,n__default["default"].createElement("button",{type:"button",className:emotion.cx({[p.avatarStacked]:e==="stacked"},p.moreAvatarsBtn)},A.length)),n__default["default"].createElement(f36Menu.Menu.List,null,A.map((i,l)=>n__default["default"].createElement(f36Menu.Menu.Item,{className:p.moreAvatarsItem,key:`avatar-${l}`},n__default["default"].cloneElement(i,{key:`avatar-menuitem-${l}`,size:"tiny"}),i.props.alt)))))}var $=n.forwardRef(_);
 
-exports.Avatar = w;
-exports.AvatarGroup = R;
+exports.Avatar = V;
+exports.AvatarGroup = $;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@contentful/f36-avatar",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.3",
   "description": "Forma 36: Avatar component",
@@ -9,6 +9,6 @@ "scripts": {
   "dependencies": {
-    "@contentful/f36-core": "^4.45.0",
+    "@contentful/f36-core": "^4.48.0",
     "@contentful/f36-image": "^4.0.0-alpha.0",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/f36-menu": "^4.0.0",
+    "@contentful/f36-menu": "^4.48.0",
     "emotion": "^10.0.17"
@@ -15,0 +15,0 @@ },

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

37727

increased by6.35%

Lines of code

77

increased by5.48%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@contentful/f36-core@^4.48.0

• Updated@contentful/f36-menu@^4.48.0