"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[6658],{"../../node_modules/@mdx-js/react/lib/index.js":function(g,p,o){o.d(p,{BN:function(){return l},RP:function(){return r},gz:function(){return c},xA:function(){return v}});var i=o("../../node_modules/react/index.js");const l=i.createContext({});function c(e){return u;function u(a){const m=r(a.components);return i.createElement(e,{...a,allComponents:m})}}function r(e){const u=i.useContext(l);return i.useMemo(()=>typeof e=="function"?e(u):{...u,...e},[u,e])}const s={};function v({components:e,children:u,disableParentContext:a}){let m;return a?m=typeof e=="function"?e({}):e||s:m=r(e),i.createElement(l.Provider,{value:m},u)}},"./src/components/UsersIndicator/Avatar.story.tsx":function(g,p,o){o.r(p),o.d(p,{Basic:function(){return _},default:function(){return D}});var i=o("../../node_modules/react/index.js"),l=o("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),c=o("./src/themes/ThemeContext.tsx"),r=o("./src/components/Layout/utils/responsiveness.tsx");const s=({src:t,alt:n,width:d,height:x})=>{const L=(0,c.of)(v,d,x);return i.createElement("img",{className:L.image,src:t,alt:n})},v=(t,n=3,d=3)=>({image:(0,l.AH)([(0,r.Y)(t,n,x=>({width:t.spacing(x)})),(0,r.Y)(t,d,x=>({height:t.spacing(x)})),{borderRadius:t.shape.radius.circle}])});try{s.displayName="Avatar",s.__docgenInfo={description:"",displayName:"Avatar",props:{src:{defaultValue:null,description:"",name:"src",required:!0,type:{name:"string"}},alt:{defaultValue:null,description:"",name:"alt",required:!0,type:{name:"string"}},width:{defaultValue:null,description:"",name:"width",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},height:{defaultValue:null,description:"",name:"height",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/UsersIndicator/Avatar.tsx#Avatar"]={docgenInfo:s.__docgenInfo,name:"Avatar",path:"src/components/UsersIndicator/Avatar.tsx#Avatar"})}catch{}var e=o("../../node_modules/react/jsx-runtime.js"),u=o("../../node_modules/@mdx-js/react/lib/index.js"),a=o("../../node_modules/@storybook/blocks/dist/index.mjs");function m(t){const n=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",pre:"pre"},(0,u.RP)(),t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a.W8,{title:"MDX|Avatar",component:s}),`
`,(0,e.jsx)(n.h1,{id:"avatar",children:"Avatar"}),`
`,(0,e.jsxs)(n.p,{children:["A basic component for displaying a user's avatar. The default dimensions (width and height) of this component are set to 24 pixels, but these can be overridden by passing a ",(0,e.jsx)(n.code,{children:"width"})," and ",(0,e.jsx)(n.code,{children:"height"})," prop. Both props are ",(0,e.jsx)(n.code,{children:"ThemeSpacingTokens"}),", meaning that instead of passing a specific pixel value, you should pass a token value which will be converted into pixels by multiplying it with the base spacing value - ",(0,e.jsx)(n.code,{children:"8"}),"."]}),`
`,(0,e.jsx)(n.h2,{id:"usage",children:"Usage"}),`
`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`import { Avatar } from '@grafana/ui';

const user = {
  id: 5,
  name: 'Admin',
  email: 'admin@org.com',
  avatarUrl: 'https://secure.gravatar.com/avatar',
};

const Example = () => {
  return <Avatar src={user.avatarUrl} alt={\`Avatar for the user \${user.name}\`} width={4} height={4} />;
};
`})}),`
`,(0,e.jsx)(a.ov,{of:s})]})}function f(t={}){const{wrapper:n}=Object.assign({},(0,u.RP)(),t.components);return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(m,t)})):m(t)}var h=f,y=Object.defineProperty,j=Object.defineProperties,T=Object.getOwnPropertyDescriptors,A=Object.getOwnPropertySymbols,C=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,b=(t,n,d)=>n in t?y(t,n,{enumerable:!0,configurable:!0,writable:!0,value:d}):t[n]=d,O=(t,n)=>{for(var d in n||(n={}))C.call(n,d)&&b(t,d,n[d]);if(A)for(var d of A(n))w.call(n,d)&&b(t,d,n[d]);return t},R=(t,n)=>j(t,T(n)),P,S,E;const I={title:"General/UsersIndicator/Avatar",component:s,parameters:{docs:{page:h},controls:{exclude:["alt"]}},argTypes:{width:{control:"number"},height:{control:"number"}}},_=(t=>i.createElement(s,O({},t))).bind({});_.args={src:"https://secure.gravatar.com/avatar",alt:"User avatar",width:3,height:3};var D=I;_.parameters=R(O({},_.parameters),{docs:R(O({},(P=_.parameters)==null?void 0:P.docs),{source:O({originalSource:"args => <Avatar {...args} />"},(E=(S=_.parameters)==null?void 0:S.docs)==null?void 0:E.source)})})},"./src/components/Layout/utils/responsiveness.tsx":function(g,p,o){o.d(p,{Y:function(){return l}});function i(c,r,s,v){const e=r[v];if(e!=null)return{[c.breakpoints.up(v)]:s(e)}}function l(c,r,s){return r==null?null:typeof r!="object"||!("xs"in r)?s(r):[i(c,r,s,"xs"),i(c,r,s,"sm"),i(c,r,s,"md"),i(c,r,s,"lg"),i(c,r,s,"xl"),i(c,r,s,"xxl")]}try{l.displayName="getResponsiveStyle",l.__docgenInfo={description:"Function that converts a ResponsiveProp object into CSS",displayName:"getResponsiveStyle",props:{}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"]={docgenInfo:l.__docgenInfo,name:"getResponsiveStyle",path:"src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"})}catch{}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(g,p,o){/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var i=o("../../node_modules/react/index.js"),l=Symbol.for("react.element"),c=Symbol.for("react.fragment"),r=Object.prototype.hasOwnProperty,s=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,v={key:!0,ref:!0,__self:!0,__source:!0};function e(u,a,m){var f,h={},y=null,j=null;m!==void 0&&(y=""+m),a.key!==void 0&&(y=""+a.key),a.ref!==void 0&&(j=a.ref);for(f in a)r.call(a,f)&&!v.hasOwnProperty(f)&&(h[f]=a[f]);if(u&&u.defaultProps)for(f in a=u.defaultProps,a)h[f]===void 0&&(h[f]=a[f]);return{$$typeof:l,type:u,key:y,ref:j,props:h,_owner:s.current}}p.Fragment=c,p.jsx=e,p.jsxs=e},"../../node_modules/react/jsx-runtime.js":function(g,p,o){g.exports=o("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
