| 1 | {"version":3,"sources":["../../src/stories/Avatar.story.jsx"],"names":["rndNum","avatarImg","smallImg","largeImg","noProportionalImg","user","id","title","src","storiesOf","add","margin","padding","border","boxShadow","filter","width","height","backgroundColor","borderRadius","position","right","bottom"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA,IAAMA,MAAM,GAAG,wBAAO,EAAP,CAAf;AACA,IAAMC,SAAS,qDAA8CD,MAA9C,SAAf;AACA,IAAME,QAAQ,GAAG,kCAAjB;AACA,IAAMC,QAAQ,GAAG,sCAAjB;AACA,IAAMC,iBAAiB,GAAG,oCAA1B;;AAEA,IAAMC,IAAI,GAAG,SAAPA,IAAO;AAAA,SAAO;AAClBC,IAAAA,EAAE,EAAE,wBAAO,EAAP,CADc;AAElBC,IAAAA,KAAK,EAAE,YAFW;AAGlBC,IAAAA,GAAG,oDAA6C,wBAAO,EAAP,CAA7C;AAHe,GAAP;AAAA,CAAb;;eAMe,wBAAmB;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AAChC,SAAOA,SAAS,CAAC,eAAD,CAAT,CACJC,GADI,CACA,4BADA,EAC8B;AAAA,wBACjC,gCAAC,iBAAD,qBACE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,GAAG,EAAET;AAAhC,MADF,CADiC;AAAA,GAD9B,EAMJS,GANI,CAMA,mCANA,EAMqC;AAAA,wBACxC,gCAAC,iBAAD,qBACE,gCAAC,kBAAD;AAAQ,MAAA,IAAI,EAAC,YAAb;AAA0B,MAAA,MAAM,EAAET;AAAlC,MADF,CADwC;AAAA,GANrC,EAWJS,GAXI,CAWA,OAXA,EAWS;AAAA,wBACZ,gCAAC,iBAAD,qBACE,gCAAC,kBAAD,OADF,CADY;AAAA,GAXT,EAgBJA,GAhBI,CAgBA,uBAhBA,EAgByB;AAAA,wBAC5B,gCAAC,iBAAD,qBACE,gCAAC,kBAAD;AAAQ,MAAA,eAAe,EAAC,SAAxB;AAAkC,MAAA,KAAK,EAAC;AAAxC,MADF,eAEE,gCAAC,kBAAD;AAAQ,MAAA,eAAe,EAAC,SAAxB;AAAkC,MAAA,KAAK,EAAC;AAAxC,MAFF,eAGE,gCAAC,kBAAD;AAAQ,MAAA,eAAe,EAAC,SAAxB;AAAkC,MAAA,KAAK,EAAC;AAAxC,MAHF,eAIE,gCAAC,kBAAD;AAAQ,MAAA,eAAe,EAAC,SAAxB;AAAkC,MAAA,KAAK,EAAC;AAAxC,MAJF,eAKE,gCAAC,kBAAD;AAAQ,MAAA,eAAe,EAAC,SAAxB;AAAkC,MAAA,KAAK,EAAC;AAAxC,MALF,CAD4B;AAAA,GAhBzB,EAyBJA,GAzBI,CAyBA,mCAzBA,EAyBqC;AAAA,wBACxC,gCAAC,iBAAD,qBACE,gCAAC,kBAAD,OADF,eAEE,gCAAC,kBAAD,OAFF,eAGE,gCAAC,kBAAD,OAHF,eAIE,gCAAC,kBAAD,OAJF,CADwC;AAAA,GAzBrC,EAiCJA,GAjCI,CAiCA,kBAjCA,EAiCoB;AAAA,wBACvB,gCAAC,iBAAD,qBACE,yDADF,eAEE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,MAFF,eAGE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,MAHF,eAIE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,MAJF,eAKE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,MALF,eAME,0DANF,eAOE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,MAPF,eAQE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,MARF,eASE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,MATF,eAUE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,MAVF,CADuB;AAAA,GAjCpB,EA+CJA,GA/CI,CA+CA,eA/CA,EA+CiB;AAAA,wBACpB,gCAAC,iBAAD,qBACE,wDADF,eAEE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,QAAd;AAAuB,MAAA,EAAE,EAAE;AAA3B,MAFF,eAGE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,QAAd;AAAuB,MAAA,EAAE,EAAE;AAA3B,MAHF,eAIE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,QAAd;AAAuB,MAAA,EAAE,EAAC;AAA1B,MAJF,eAKE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,QAAd;AAAuB,MAAA,EAAE,EAAE;AAA3B,MALF,eAME,uDANF,eAOE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,QAAd;AAAuB,MAAA,EAAE,EAAE;AAA3B,MAPF,eAQE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,QAAd;AAAuB,MAAA,EAAE,EAAE;AAA3B,MARF,eASE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,QAAd;AAAuB,MAAA,EAAE,EAAE;AAA3B,MATF,CADoB;AAAA,GA/CjB,EA4DJA,GA5DI,CA4DA,UA5DA,EA4DY;AAAA,wBACf,gCAAC,iBAAD,qBACE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,MADF,eAEE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,SAAS,EAAE;AAAtC,MAFF,eAGE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,SAAS,EAAE;AAAtC,MAHF,eAIE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,SAAS,EAAE;AAAtC,MAJF,CADe;AAAA,GA5DZ,EAoEJA,GApEI,CAoEA,MApEA,EAoEQ;AAAA,wBACX,gCAAC,iBAAD,qBACE,gCAAC,kBAAD,EAAYL,IAAI,EAAhB,CADF,eAEE,gCAAC,kBAAD,gCAAYA,IAAI,EAAhB;AAAoB,MAAA,IAAI,EAAE;AAA1B,OAFF,eAGE,gCAAC,kBAAD,gCAAYA,IAAI,EAAhB;AAAoB,MAAA,IAAI,EAAE;AAA1B,OAHF,eAIE,gCAAC,kBAAD,gCAAYA,IAAI,EAAhB;AAAoB,MAAA,IAAI,EAAE;AAA1B,OAJF,eAKE,gCAAC,kBAAD,gCAAYA,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAE,GAA3B;AAAgC,MAAA,MAAM,EAAE;AAAxC,OALF,eAME,gCAAC,kBAAD,gCAAYA,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAE,EAA3B;AAA+B,MAAA,MAAM,EAAE;AAAvC,OANF,CADW;AAAA,GApER,EA8EJK,GA9EI,CA8EA,eA9EA,EA8EiB;AAAA,wBACpB,gCAAC,iBAAD,qBACE,0DACE,gCAAC,kBAAD,gCAAYL,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAE;AAAEM,QAAAA,MAAM,EAAE;AAAV;AAA3B,OADF,eAEE,gCAAC,kBAAD,gCAAYN,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAE;AAAEO,QAAAA,OAAO,EAAE;AAAX;AAA3B,OAFF,eAGE,gCAAC,kBAAD,gCAAYP,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAE;AAAEQ,QAAAA,MAAM,EAAE;AAAV;AAA3B,OAHF,eAIE,gCAAC,kBAAD,gCAAYR,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAE;AAAEQ,QAAAA,MAAM,EAAE;AAAV;AAA3B,OAJF,eAKE,gCAAC,kBAAD,gCAAYR,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAE;AAAEQ,QAAAA,MAAM,EAAE;AAAV,OAA3B;AAA6E,MAAA,GAAG,EAAC;AAAjF,OALF,CADF,eAQE,0DACE,gCAAC,kBAAD,gCAAYR,IAAI,EAAhB;AAAoB,MAAA,UAAU,EAAE;AAAES,QAAAA,SAAS,EAAE;AAAb;AAAhC,OADF,eAEE,gCAAC,kBAAD,gCAAYT,IAAI,EAAhB;AAAoB,MAAA,UAAU,EAAE;AAAEU,QAAAA,MAAM,EAAE;AAAV;AAAhC,OAFF,eAGE,gCAAC,kBAAD;AAEIT,MAAAA,EAAE,EAAE,wBAAO,EAAP,CAFR;AAGIC,MAAAA,KAAK,EAAE,YAHX;AAKE,MAAA,UAAU,EAAE;AAAEM,QAAAA,MAAM,EAAE;AAAV;AALd,MAHF,eAUE,gCAAC,kBAAD,gCACMR,IAAI,EADV;AAEE,MAAA,UAAU,EAAE;AAAEQ,QAAAA,MAAM,EAAE;AAAV,OAFd;AAGE,MAAA,GAAG,EAAC;AAHN,OAVF,eAeE,gCAAC,kBAAD,gCAAYR,IAAI,EAAhB;AAAoB,MAAA,UAAU,EAAE;AAAEQ,QAAAA,MAAM,EAAE;AAAV;AAAhC,OAfF,eAgBE,gCAAC,kBAAD,gCAAYR,IAAI,EAAhB;AAAoB,MAAA,UAAU,EAAE;AAAEQ,QAAAA,MAAM,EAAE;AAAV;AAAhC,OAhBF,CARF,CADoB;AAAA,GA9EjB,EA2GJH,GA3GI,CA2GA,OA3GA,EA2GS;AAAA,wBACZ,gCAAC,iBAAD,qBACE,gCAAC,kBAAD,EAAYL,IAAI,EAAhB,eACE,gCAAC,kBAAD,CAAQ,KAAR;AAAc,MAAA,IAAI,MAAlB;AAAmB,MAAA,GAAG;AAAtB,oBACE;AACE,MAAA,KAAK,EAAE;AACLW,QAAAA,KAAK,EAAE,EADF;AAELC,QAAAA,MAAM,EAAE,EAFH;AAGLC,QAAAA,eAAe,EAAE,SAHZ;AAILC,QAAAA,YAAY,EAAE,KAJT;AAKLN,QAAAA,MAAM,EAAE;AALH;AADT,MADF,CADF,CADF,eAeE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC;AAAd,oBACE,gCAAC,kBAAD,CAAQ,KAAR;AAAc,MAAA,KAAK,MAAnB;AAAoB,MAAA,MAAM;AAA1B,oBACE;AACE,MAAA,KAAK,EAAE;AACLG,QAAAA,KAAK,EAAE,EADF;AAELC,QAAAA,MAAM,EAAE,EAFH;AAGLC,QAAAA,eAAe,EAAE,SAHZ;AAILC,QAAAA,YAAY,EAAE,KAJT;AAKLN,QAAAA,MAAM,EAAE;AALH;AADT,MADF,CADF,CAfF,eA6BE,gCAAC,kBAAD;AAAQ,MAAA,IAAI,EAAE,GAAd;AAAmB,MAAA,KAAK,EAAC;AAAzB,oBACE,gCAAC,kBAAD,CAAQ,KAAR;AAAc,MAAA,KAAK,MAAnB;AAAoB,MAAA,MAAM;AAA1B,oBACE;AACE,MAAA,KAAK,EAAE;AACLG,QAAAA,KAAK,EAAE,EADF;AAELC,QAAAA,MAAM,EAAE,EAFH;AAGLC,QAAAA,eAAe,EAAE,SAHZ;AAILC,QAAAA,YAAY,EAAE,KAJT;AAKLN,QAAAA,MAAM,EAAE;AALH;AADT,MADF,CADF,CA7BF,eA2CE,gCAAC,kBAAD;AAAQ,MAAA,IAAI,EAAE,GAAd;AAAmB,MAAA,KAAK,EAAC;AAAzB,oBACE,gCAAC,kBAAD,CAAQ,KAAR;AAAc,MAAA,KAAK,MAAnB;AAAoB,MAAA,MAAM;AAA1B,oBACE;AACE,MAAA,KAAK,EAAE;AACLG,QAAAA,KAAK,EAAE,EADF;AAELC,QAAAA,MAAM,EAAE,EAFH;AAGLC,QAAAA,eAAe,EAAE,SAHZ;AAILC,QAAAA,YAAY,EAAE,KAJT;AAKLN,QAAAA,MAAM,EAAE;AALH;AADT,MADF,CADF,CA3CF,eAyDE,gCAAC,kBAAD,qBACE,gCAAC,kBAAD,CAAQ,KAAR;AAAc,MAAA,IAAI,MAAlB;AAAmB,MAAA,GAAG;AAAtB,oBACE;AACE,MAAA,KAAK,EAAE;AACLG,QAAAA,KAAK,EAAE,EADF;AAELC,QAAAA,MAAM,EAAE,EAFH;AAGLC,QAAAA,eAAe,EAAE,SAHZ;AAILC,QAAAA,YAAY,EAAE,KAJT;AAKLN,QAAAA,MAAM,EAAE;AALH;AADT,MADF,CADF,eAYE,gCAAC,kBAAD,CAAQ,KAAR;AAAc,MAAA,KAAK,MAAnB;AAAoB,MAAA,GAAG;AAAvB,oBACE;AACE,MAAA,KAAK,EAAE;AACLG,QAAAA,KAAK,EAAE,EADF;AAELC,QAAAA,MAAM,EAAE,EAFH;AAGLC,QAAAA,eAAe,EAAE,SAHZ;AAILC,QAAAA,YAAY,EAAE,KAJT;AAKLN,QAAAA,MAAM,EAAE;AALH;AADT,MADF,CAZF,eAuBE,gCAAC,kBAAD,CAAQ,KAAR;AAAc,MAAA,IAAI,MAAlB;AAAmB,MAAA,MAAM;AAAzB,oBACE;AACE,MAAA,KAAK,EAAE;AACLG,QAAAA,KAAK,EAAE,EADF;AAELC,QAAAA,MAAM,EAAE,EAFH;AAGLC,QAAAA,eAAe,EAAE,SAHZ;AAILC,QAAAA,YAAY,EAAE,KAJT;AAKLN,QAAAA,MAAM,EAAE;AALH;AADT,MADF,CAvBF,eAkCE,gCAAC,kBAAD,CAAQ,KAAR;AAAc,MAAA,KAAK,MAAnB;AAAoB,MAAA,MAAM;AAA1B,oBACE;AACE,MAAA,KAAK,EAAE;AACLG,QAAAA,KAAK,EAAE,EADF;AAELC,QAAAA,MAAM,EAAE,EAFH;AAGLC,QAAAA,eAAe,EAAE,SAHZ;AAILC,QAAAA,YAAY,EAAE,KAJT;AAKLN,QAAAA,MAAM,EAAE;AALH;AADT,MADF,CAlCF,CAzDF,eAwGE,gCAAC,kBAAD,qBACE;AACE,MAAA,KAAK,EAAE;AACLG,QAAAA,KAAK,EAAE,EADF;AAELC,QAAAA,MAAM,EAAE,EAFH;AAGLC,QAAAA,eAAe,EAAE,SAHZ;AAILC,QAAAA,YAAY,EAAE,KAJT;AAKLC,QAAAA,QAAQ,EAAE,UALL;AAMLC,QAAAA,KAAK,EAAE,MANF;AAOLC,QAAAA,MAAM,EAAE,MAPH;AAQLT,QAAAA,MAAM,EAAE;AARH;AADT,MADF,CAxGF,CADY;AAAA,GA3GT,EAoOJH,GApOI,CAoOA,OApOA,EAoOS;AAAA,wBACZ,gCAAC,iBAAD,qBACE,gCAAC,kBAAD,gCAAYL,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAC;AAA1B,OADF,eAEE,gCAAC,kBAAD,gCAAYA,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAC;AAA1B,OAFF,eAGE,gCAAC,kBAAD,gCAAYA,IAAI,EAAhB;AAAoB,MAAA,KAAK,EAAC;AAA1B,OAHF,CADY;AAAA,GApOT,EA2OJK,GA3OI,CA2OA,YA3OA,EA2Oc;AAAA,wBACjB,gCAAC,iBAAD,qBACE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,GAAG,EAAC;AAA/B,MADF,CADiB;AAAA,GA3Od,EAgPJA,GAhPI,CAgPA,iBAhPA,EAgPmB;AAAA,wBACtB,gCAAC,iBAAD,qBACE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,GAAG,EAAER;AAAhC,MADF,eAEE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,GAAG,EAAEC;AAAhC,MAFF,eAGE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,GAAG,EAAEC;AAAhC,MAHF,eAIE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,GAAG,EAAEA,iBAAhC;AAAmD,MAAA,KAAK,EAAE,GAA1D;AAA+D,MAAA,MAAM,EAAE;AAAvE,MAJF,eAKE,gCAAC,kBAAD;AAAQ,MAAA,KAAK,EAAC,YAAd;AAA2B,MAAA,GAAG,EAAEA,iBAAhC;AAAmD,MAAA,KAAK,EAAC,SAAzD;AAAmE,MAAA,KAAK,EAAE,GAA1E;AAA+E,MAAA,MAAM,EAAE;AAAvF,MALF,CADsB;AAAA,GAhPnB,EAyPJM,GAzPI,CAyPA,YAzPA,EAyPc;AAAA,wBACjB,gCAAC,iBAAD,qBACE;AAAG,MAAA,IAAI,EAAC;AAAR,oBACE,gCAAC,kBAAD,EAAYL,IAAI,EAAhB,CADF,CADF,CADiB;AAAA,GAzPd,CAAP,CADgC,CAiQhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD,C","sourcesContent":["import React from 'react';\nimport random from 'lodash/random';\nimport Story from '@lskjs/dev/Story';\nimport Avatar from './Avatar';\n\nconst rndNum = random(99);\nconst avatarImg = `https://randomuser.me/api/portraits/men/${rndNum}.jpg`;\nconst smallImg = 'http://placeimg.com/32/32/people';\nconst largeImg = 'http://placeimg.com/1920/1920/people';\nconst noProportionalImg = 'http://placeimg.com/640/320/people';\n\nconst user = () => ({\n id: random(99),\n title: 'John Smith',\n src: `https://randomuser.me/api/portraits/men/${random(99)}.jpg`,\n});\n\nexport default ({ storiesOf }) => {\n return storiesOf('avatar/Avatar')\n .add('Default as img (title,src)', () => (\n <Story>\n <Avatar title=\"John Smith\" src={avatarImg} />\n </Story>\n ))\n .add('Alternative as User (name,avatar)', () => (\n <Story>\n <Avatar name=\"John Smith\" avatar={avatarImg} />\n </Story>\n ))\n .add('Empty', () => (\n <Story>\n <Avatar />\n </Story>\n ))\n .add('props.backgroundColor', () => (\n <Story>\n <Avatar backgroundColor=\"#A7226E\" title=\"Purple\" />\n <Avatar backgroundColor=\"#EC2049\" title=\"Pink\" />\n <Avatar backgroundColor=\"#F26B38\" title=\"Orange\" />\n <Avatar backgroundColor=\"#F7DB4F\" title=\"Yellow\" />\n <Avatar backgroundColor=\"#2F9599\" title=\"Blue\" />\n </Story>\n ))\n .add('Empty avatar, colored by random ', () => (\n <Story>\n <Avatar />\n <Avatar />\n <Avatar />\n <Avatar />\n </Story>\n ))\n .add('Colored by title', () => (\n <Story>\n <p>Any titles:</p>\n <Avatar title=\"user 1\" />\n <Avatar title=\"user 2\" />\n <Avatar title=\"user 3\" />\n <Avatar title=\"user 4\" />\n <p>Same titles:</p>\n <Avatar title=\"user 1\" />\n <Avatar title=\"user 2\" />\n <Avatar title=\"user 3\" />\n <Avatar title=\"user 4\" />\n </Story>\n ))\n .add('Colored by id', () => (\n <Story>\n <p>Any users:</p>\n <Avatar title=\"user 1\" id={1} />\n <Avatar title=\"user 2\" id={2} />\n <Avatar title=\"user 3\" id=\"user3\" />\n <Avatar title=\"user 4\" id={null} />\n <p>Same ids:</p>\n <Avatar title=\"name 1\" id={1} />\n <Avatar title=\"name 2\" id={1} />\n <Avatar title=\"name 3\" id={1} />\n </Story>\n ))\n .add('No image', () => (\n <Story>\n <Avatar title=\"John Smith\" />\n <Avatar title=\"John Smith\" textScale={0.5} />\n <Avatar title=\"John Smith\" textScale={2} />\n <Avatar title=\"John Smith\" textScale={4} />\n </Story>\n ))\n .add('Size', () => (\n <Story>\n <Avatar {...user()} />\n <Avatar {...user()} size={32} />\n <Avatar {...user()} size={64} />\n <Avatar {...user()} size={100} />\n <Avatar {...user()} width={100} height={50} />\n <Avatar {...user()} width={50} height={100} />\n </Story>\n ))\n .add('Custom styles', () => (\n <Story>\n <div>\n <Avatar {...user()} style={{ margin: 10 }} />\n <Avatar {...user()} style={{ padding: 10 }} />\n <Avatar {...user()} style={{ border: '4px solid rgb(244, 67, 54)' }} />\n <Avatar {...user()} style={{ border: '4px solid rgba(128, 128, 128, 0.5)' }} />\n <Avatar {...user()} style={{ border: '4px solid rgba(128, 128, 128, 0.5)' }} src=\"//broken.site/img.png\" />\n </div>\n <div>\n <Avatar {...user()} innerStyle={{ boxShadow: '1px 1px 10px 2px #333' }} />\n <Avatar {...user()} innerStyle={{ filter: 'grayscale(100%)' }} />\n <Avatar\n {...{\n id: random(99),\n title: 'John Smith',\n }}\n innerStyle={{ border: '4px solid rgb(244, 67, 54)' }}\n />\n <Avatar\n {...user()}\n innerStyle={{ border: '4px solid rgba(128, 128, 128, 0.5)' }}\n src=\"//broken.site/img.png\"\n />\n <Avatar {...user()} innerStyle={{ border: '2px solid #4CAF50' }} />\n <Avatar {...user()} innerStyle={{ border: '4px solid #F44336' }} />\n </div>\n </Story>\n ))\n .add('Badge', () => (\n <Story>\n <Avatar {...user()}>\n <Avatar.Badge left top>\n <div\n style={{\n width: 10,\n height: 10,\n backgroundColor: '#4CAF50',\n borderRadius: '50%',\n border: '2px solid #fff',\n }}\n />\n </Avatar.Badge>\n </Avatar>\n\n <Avatar title=\"Offline Smith\">\n <Avatar.Badge right bottom>\n <div\n style={{\n width: 10,\n height: 10,\n backgroundColor: '#F44336',\n borderRadius: '50%',\n border: '2px solid #fff',\n }}\n />\n </Avatar.Badge>\n </Avatar>\n\n <Avatar size={100} title=\"Offline Smith\">\n <Avatar.Badge right bottom>\n <div\n style={{\n width: 10,\n height: 10,\n backgroundColor: '#F44336',\n borderRadius: '50%',\n border: '2px solid #fff',\n }}\n />\n </Avatar.Badge>\n </Avatar>\n\n <Avatar size={200} title=\"Offline Smith\">\n <Avatar.Badge right bottom>\n <div\n style={{\n width: 10,\n height: 10,\n backgroundColor: '#F44336',\n borderRadius: '50%',\n border: '2px solid #fff',\n }}\n />\n </Avatar.Badge>\n </Avatar>\n\n <Avatar>\n <Avatar.Badge left top>\n <div\n style={{\n width: 10,\n height: 10,\n backgroundColor: '#4CAF50',\n borderRadius: '50%',\n border: '2px solid #fff',\n }}\n />\n </Avatar.Badge>\n <Avatar.Badge right top>\n <div\n style={{\n width: 10,\n height: 10,\n backgroundColor: '#F44336',\n borderRadius: '50%',\n border: '2px solid #fff',\n }}\n />\n </Avatar.Badge>\n <Avatar.Badge left bottom>\n <div\n style={{\n width: 10,\n height: 10,\n backgroundColor: '#574caf',\n borderRadius: '50%',\n border: '2px solid #fff',\n }}\n />\n </Avatar.Badge>\n <Avatar.Badge right bottom>\n <div\n style={{\n width: 10,\n height: 10,\n backgroundColor: '#c6972f',\n borderRadius: '50%',\n border: '2px solid #fff',\n }}\n />\n </Avatar.Badge>\n </Avatar>\n\n <Avatar>\n <div\n style={{\n width: 10,\n height: 10,\n backgroundColor: '#F44336',\n borderRadius: '50%',\n position: 'absolute',\n right: '24px',\n bottom: '24px',\n border: '2px solid #fff',\n }}\n />\n </Avatar>\n </Story>\n ))\n .add('Shape', () => (\n <Story>\n <Avatar {...user()} shape=\"circle\" />\n <Avatar {...user()} shape=\"square\" />\n <Avatar {...user()} shape=\"rounded\" />\n </Story>\n ))\n .add('Failed img', () => (\n <Story>\n <Avatar title=\"John Smith\" src=\"/failed-img.png\" />\n </Story>\n ))\n .add('No proportional', () => (\n <Story>\n <Avatar title=\"John Smith\" src={smallImg} />\n <Avatar title=\"John Smith\" src={largeImg} />\n <Avatar title=\"John Smith\" src={noProportionalImg} />\n <Avatar title=\"John Smith\" src={noProportionalImg} width={128} height={64} />\n <Avatar title=\"John Smith\" src={noProportionalImg} shape=\"rounded\" width={128} height={64} />\n </Story>\n ))\n .add('With tag a', () => (\n <Story>\n <a href=\"#\">\n <Avatar {...user()} />\n </a>\n </Story>\n ));\n // .add('Knobs', () => (\n // <Story>\n // <Avatar\n // name={knob.text('Name')}\n // title={knob.text('Title')}\n // avatar={knob.text('Avatar')}\n // src={knob.text('Src')}\n // size={knob.number('Size', 64)}\n // width={knob.number('Width')}\n // height={knob.number('Height')}\n // shape={knob.select('Shape', { cirlce: 'circle', rounded: 'rounded', square: 'square' }, 'circle')}\n // border={knob.boolean('Border')}\n // borderColor={knob.color('Border color')}\n // borderWidth={knob.number('Border width')}\n // borderPadding={knob.number('Border padding')}\n // bgColor={knob.color('Background color')}\n // textColor={knob.color('Text color')}\n // textScale={knob.number('Text size scale')}\n // shadow={knob.boolean('Shadow')}\n // inactive={knob.boolean('Inactive')}\n // style={knob.object('Custom styles', { padding: '10px' })}\n // />\n // </Story>\n // ));\n};\n"],"file":"Avatar.story.js"} |