avatar.stories.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. import React from 'react';
  2. import Avatar from 'app/components/avatar';
  3. const USER = {
  4. id: 1,
  5. name: 'Jane Bloggs',
  6. email: 'janebloggs@example.com',
  7. };
  8. export default {
  9. title: 'Core/Style/Avatar',
  10. component: Avatar,
  11. args: {
  12. hasTooltip: false,
  13. suggested: false,
  14. },
  15. };
  16. export const Letters = ({...args}) => {
  17. const user = Object.assign({}, USER);
  18. return <Avatar user={user} {...args} />;
  19. };
  20. Letters.parameters = {
  21. docs: {
  22. description: {
  23. story: 'This is the default avatar',
  24. },
  25. },
  26. };
  27. export const Gravatar = ({...args}) => {
  28. const user = {
  29. id: 2,
  30. name: 'Ben Vinegar',
  31. email: 'ben@benv.ca',
  32. avatar: {
  33. avatarType: 'gravatar',
  34. avatarUuid: '2d641b5d-8c74-44de-9cb6-fbd54701b35e',
  35. },
  36. };
  37. return <Avatar user={user} {...args} />;
  38. };
  39. Gravatar.parameters = {
  40. docs: {
  41. description: {
  42. story: 'Avatar source from gravatar',
  43. },
  44. },
  45. };
  46. export const UploadedImage = ({...args}) => {
  47. const user = Object.assign({}, USER, {
  48. avatar: {
  49. avatarType: 'upload',
  50. avatarUuid: '51e63edabf31412aa2a955e9cf2c1ca0',
  51. },
  52. });
  53. return <Avatar user={user} {...args} />;
  54. };
  55. UploadedImage.parameters = {
  56. docs: {
  57. description: {
  58. story: 'Uploaded image',
  59. },
  60. },
  61. };
  62. export const TeamAvatar = ({...args}) => {
  63. const team = {
  64. name: 'Captain Planet',
  65. slug: 'captain-planet',
  66. };
  67. return <Avatar team={team} {...args} />;
  68. };
  69. TeamAvatar.parameters = {
  70. docs: {
  71. description: {
  72. story: 'Avatar for teams',
  73. },
  74. },
  75. };