@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 12.2 kB
JavaScript
var SLDS;!function(){"use strict";var e,t,n,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3189:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return j},getElement:function(){return x}});var l=n(1594),r=n.n(l),i=n(5671),a=n(4187),s=n.n(a),o=n(942),c=n.n(o),m=n(405);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}var d=function(e){var t=e.isPrimary,n=e.isInverse,i=e.type,a=function(e,t){switch(e){case"icon":return r().createElement(E,null);case"user-initials":return r().createElement(h,{isInverse:n});default:return r().createElement(f,{imgType:t?"1":"2"})}};return r().createElement(l.Fragment,null,r().createElement(g,{isPrimary:!0,isInverse:n},a(i,t)),r().createElement(g,{isInverse:n},a(i,!1)))};d.defaultProps={type:"image"},d.propTypes={type:s().oneOf(["image","icon","user-initials"]),isPrimary:s().bool,isInverse:s().bool};var p=function(e){return r().createElement("span",{className:c()("slds-avatar-group",(t={},n="slds-avatar-group_".concat(e.size),l=e.size,(n=function(e){var t=function(e){if("object"!=u(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=u(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==u(t)?t:t+""}(n))in t?Object.defineProperty(t,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[n]=l,t))},e.children);var t,n,l};p.defaultProps={children:r().createElement(d,null)},p.propTypes={children:s().node.isRequired,size:s().oneOf(["x-small","small","medium","large"])};var g=function(e){var t=e.children,n=e.isPrimary,l=e.isInverse;return r().createElement(m.eu,{isGrouped:!0,isPrimary:n,isInverse:l},t)};g.propTypes={children:s().node.isRequired,isPrimary:s().bool,isInverse:s().bool};var f=function(e){var t=e.imgType,n="Person ".concat(t," name");return r().createElement("img",{alt:n,src:"/assets/images/avatar".concat(t,".jpg"),title:n})};f.defaultProps={imgType:"1"},f.propTypes={imgType:s().oneOf(["1","2"]).isRequired};var E=function(e){return r().createElement(m.hS,{symbol:"user",isGrouped:!0})},h=function(e){return r().createElement(m.Ph,{isGrouped:!0,isInverse:e.isInverse,title:"Person name",initials:"WW"})};h.propTypes={isInverse:s().bool},n(2937);var v=n(5619),y=(n(1374),n(6547)),b=(n(3212),n(8522),[{id:"default",label:"Default",element:r().createElement(p,null,r().createElement(d,{type:"image"}))}]),A=[{id:"with-icons",label:"With icons",element:r().createElement(p,null,r().createElement(d,{type:"icon"}))},{id:"with-user-initials",label:"With initials",element:r().createElement(p,null,r().createElement(d,{type:"user-initials"}))},{id:"with-user-initials-inversed",label:"With initials inversed",demoStyles:"padding: 0.5rem; background: #16325c",storybookStyles:!0,element:r().createElement(p,null,r().createElement(d,{type:"user-initials",isInverse:!0}))},{id:"with-image-and-icon",label:"With image and icon",element:r().createElement(p,null,r().createElement(g,{isPrimary:!0},r().createElement(f,null)),r().createElement(g,null,r().createElement(E,null)))},{id:"with-icon-and-user-initials",label:"With icon and user initials",element:r().createElement(p,null,r().createElement(g,{isPrimary:!0},r().createElement(E,null)),r().createElement(g,null,r().createElement(h,null)))},{id:"with-user-initials-and-image",label:"With user initials and image",element:r().createElement(p,null,r().createElement(g,{isPrimary:!0},r().createElement(h,null)),r().createElement(g,null,r().createElement(f,null)))},{id:"x-small-image",label:"X-Small",element:r().createElement(p,{size:"x-small"},r().createElement(d,{type:"image"}))},{id:"small-image",label:"Small",element:r().createElement(p,{size:"small"},r().createElement(d,{type:"image"}))},{id:"medium-image",label:"Medium",element:r().createElement(p,{size:"medium"},r().createElement(d,{type:"image"}))},{id:"large-image",label:"Large",element:r().createElement(p,{size:"large"},r().createElement(d,{type:"image"}))},{id:"x-small-icon",label:"X-Small With icon",element:r().createElement(p,{size:"x-small"},r().createElement(d,{type:"icon"}))},{id:"small-icon",label:"Small With icon",element:r().createElement(p,{size:"small"},r().createElement(d,{type:"icon"}))},{id:"medium-icon",label:"Medium With icon",element:r().createElement(p,{size:"medium"},r().createElement(d,{type:"icon"}))},{id:"large-icon",label:"Large With icon",element:r().createElement(p,{size:"large"},r().createElement(d,{type:"icon"}))},{id:"x-small-user-initials",label:"X-Small With initials",element:r().createElement(p,{size:"x-small"},r().createElement(d,{type:"user-initials"}))},{id:"small-user-initials",label:"Small With initials",element:r().createElement(p,{size:"small"},r().createElement(d,{type:"user-initials"}))},{id:"medium-user-initials",label:"Medium With initials",element:r().createElement(p,{size:"medium"},r().createElement(d,{type:"user-initials"}))},{id:"large-user-initials",label:"Large With initials",element:r().createElement(p,{size:"large"},r().createElement(d,{type:"user-initials"}))}],O=n(2436),S=n(9582),_=n(806),w=i.XB.code,I=i.XB.h2,W=i.XB.h3,P=i.XB.h4,N=i.XB.p,x=function(){return(0,l.createElement)(i.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"An avatar group is an element that communicates to the user that there is more than 1 person associated to an item."),(0,l.createElement)(y.A,{exampleOnly:!0},(0,_.NO)(b)),I({id:"About-Avatar-Group"},"About Avatar Group"),N({},"The Avatar Group contains two Avatar components with modifying classes. Both Avatars in the group get ",w({},"slds-avatar-grouped")," applied to them. Then, ",w({},"slds-avatar-grouped__primary")," is applied to the first Avatar and ",w({},"slds-avatar-grouped__secondary")," on the second. Avatars of the image variety are preferred within an Avatar Group."),(0,l.createElement)(v.A,{type:"note",header:"Design Guidelines"},(0,l.createElement)("p",null,"Avatar Groups should only be used to represent people and NOT groups of salesforce objects.")),I({id:"Base"},"Base"),(0,l.createElement)(y.A,null,(0,_.NO)(b)),W({id:"With-Icon"},"With Icon"),N({},"Icon Avatars can be put into a group. In this case, on the ",w({},"slds-icon_container")," apply the ",w({},"slds-avatar-grouped__icon")," class."),(0,l.createElement)(y.A,null,(0,_.NO)(A,"with-icons")),W({id:"With-User-Initials"},"With User Initials"),N({},"User Initials Avatars can be put into a group. In this case, on the ",w({},"<abbr>")," apply the ",w({},"slds-avatar-grouped__initials")," class."),(0,l.createElement)(y.A,null,(0,_.NO)(A,"with-user-initials")),P({id:"Inversed"},"Inversed"),N({},"Inversed User Initials Avatars can also be used in a group when on a dark background. To achieve the lighter background for the Avatar, additionally apply the ",w({},"slds-avatar-grouped_inverse")," class along with the ",w({},"slds-avatar-grouped")," class."),(0,l.createElement)(y.A,{demoStyles:(0,_.GP)(A,"with-user-initials-inversed")},(0,_.NO)(A,"with-user-initials-inversed")),W({id:"With-Mixed-Avatar-types"},"With Mixed Avatar types"),N({},"Avatars of type image, icon, or initials can be used in combination with each other in a group."),(0,l.createElement)(y.A,null,(0,l.createElement)(l.Fragment,null,(0,_.NO)(A,"with-image-and-icon"),(0,_.NO)(A,"with-icon-and-user-initials"),(0,_.NO)(A,"with-user-initials-and-image"))),I({id:"Sizes"},"Sizes"),N({},"Avatar Groups come in 4 different sizes: ",w({},"x-small"),", ",w({},"small"),", ",w({},"medium"),", and ",w({},"large")," by applying a ",w({},"slds-avatar-group_{size}")," modifier class on ",w({},"slds-avatar-group"),". If the size modifier class is not used, ",w({},"medium")," is also the default size."),W({id:"With-Images"},"With Images"),(0,l.createElement)(S.A,null,(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"X-Small"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"x-small-image"))),(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"Small"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"small-image"))),(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"Medium"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"medium-image"))),(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"Large"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"large-image")))),W({id:"With-Icons"},"With Icons"),(0,l.createElement)(S.A,null,(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"X-Small"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"x-small-icon"))),(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"Small"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"small-icon"))),(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"Medium"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"medium-icon"))),(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"Large"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"large-icon")))),W({id:"With-User-Initials-2"},"With User Initials"),(0,l.createElement)(S.A,null,(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"X-Small"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"x-small-user-initials"))),(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"Small"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"small-user-initials"))),(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"Medium"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"medium-user-initials"))),(0,l.createElement)(O.A,null,(0,l.createElement)("strong",null,"Large"),(0,l.createElement)(y.A,{toggleCode:!1},(0,_.NO)(A,"large-user-initials")))))},j=function(){return(0,i.Qr)(x())}},5206:function(e){e.exports=ReactDOM}},r={};function i(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={id:e,exports:{}};return l[e](n,n.exports,i),n.exports}i.m=l,i.amdO={},e=[],i.O=function(t,n,l,r){if(!n){var a=1/0;for(m=0;m<e.length;m++){n=e[m][0],l=e[m][1],r=e[m][2];for(var s=!0,o=0;o<n.length;o++)(!1&r||a>=r)&&Object.keys(i.O).every(function(e){return i.O[e](n[o])})?n.splice(o--,1):(s=!1,r<a&&(a=r));if(s){e.splice(m--,1);var c=l();void 0!==c&&(t=c)}}return t}r=r||0;for(var m=e.length;m>0&&e[m-1][2]>r;m--)e[m]=e[m-1];e[m]=[n,l,r]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var r=Object.create(null);i.r(r);var a={};t=t||[null,n({}),n([]),n(n)];for(var s=2&l&&e;("object"==typeof s||"function"==typeof s)&&!~t.indexOf(s);s=n(s))Object.getOwnPropertyNames(s).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},i.d(r,a),r},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=8794,function(){var e={8794:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,r,a=n[0],s=n[1],o=n[2],c=0;if(a.some(function(t){return 0!==e[t]})){for(l in s)i.o(s,l)&&(i.m[l]=s[l]);if(o)var m=o(i)}for(t&&t(n);c<a.length;c++)r=a[c],i.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return i.O(m)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var a=i.O(void 0,[3540],function(){return i(3189)});a=i.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/avatar-group/docs.mdx.js"]=a}();