[TAIK-2326] - Add boring avatars on avatar component (#58)

* Add boring-avatars lib

* Update avatar component with boring-avatars

* Update stories

* Update tests

* Update avatar story with size arg

* Update table component styling

* Add square prop to the avatar component

* Fix avatar on tables in small devices

package.json

@@ -103,6 +103,7 @@
     "registry": "https://npm.pkg.github.com/"
   },
   "dependencies": {
+    "boring-avatars": "^1.5.8",
     "jest-styled-components": "^7.0.3",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.1.1",

src/atoms/avatar-image/__tests__/__snapshots__/avatar.test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar renders 1`] = `
+<DocumentFragment>
+  .c0 {
+  position: relative;
+  border: 1px solid hsl(0,0%,16%);
+  border-radius: 999px;
+  width: 30px;
+  height: 30px;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.c0 > * {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.c0 img {
+  object-fit: cover;
+}
+
+<div
+    class="c0 avatar-img"
+    size="30"
+  >
+    <img
+      alt="avatar alt"
+      src="/dummy.png"
+    />
+  </div>
+</DocumentFragment>
+`;

src/atoms/avatar/__tests__/avatar.test.tsx → src/atoms/avatar-image/__tests__/avatar.test.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import 'jest-styled-components';
-import { Avatar } from '../../..';
+import { AvatarImage } from '../../..';
 
 describe('Avatar', () => {
   it('renders', () => {
     const { asFragment } = render(
-      <Avatar alt={'avatar alt'} url={'/dummy.png'} />
+      <AvatarImage alt={'avatar alt'} url={'/dummy.png'} />
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('has correct alt and src', () => {
     const avatarAlt = 'user avatar';
-    render(<Avatar alt={avatarAlt} url={'/dummy.png'} />);
+    render(<AvatarImage alt={avatarAlt} url={'/dummy.png'} />);
     const avatar = screen.queryByAltText(avatarAlt);
     expect(avatar).toHaveProperty('src', 'http://localhost/dummy.png');
   });

src/atoms/avatar-image/index.tsx

@@ -0,0 +1,45 @@
+import React, { CSSProperties } from 'react';
+import Avatar from 'boring-avatars';
+import * as Styles from './styles';
+
+export interface AvatarProps {
+  style?: CSSProperties;
+  className?: string;
+  size?: number;
+  url?: string;
+  alt: string;
+  boring?: boolean;
+  boringType?: 'marble' | 'beam' | 'pixel' | 'sunset' | 'ring' | 'bauhaus';
+  square?: boolean;
+}
+
+const AvatarImage = (props: AvatarProps) => {
+  const {
+    style,
+    className = 'avatar-img',
+    size = 30,
+    url,
+    alt,
+    boring = true,
+    boringType = 'pixel',
+    square = false,
+  } = props;
+
+  return (
+    <Styles.Wrapper className={className} size={size} square={square}>
+      {boring && !url ? (
+        <Avatar
+          size={size}
+          name={alt}
+          variant={boringType}
+          square={square}
+          colors={['#55cad7', '#5031a9', '#f9c543', '#ef5766', '#7a7a7a']}
+        />
+      ) : (
+        <img style={style} src={url} alt={alt} />
+      )}
+    </Styles.Wrapper>
+  );
+};
+
+export default AvatarImage;

src/atoms/avatar-image/stories/avatar-image.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import AvatarImage, { AvatarProps } from '..';
+
+export default {
+  title: 'Design System/Atoms/Avatar Image',
+  component: AvatarImage,
+  argTypes: {
+    boringType: {
+      control: {
+        type: 'select',
+        options: ['marble', 'beam', 'pixel', 'sunset', 'ring', 'bauhaus'],
+      },
+    },
+  },
+};
+
+export const PNG = (args: AvatarProps) => <AvatarImage {...args} />;
+
+PNG.args = {
+  size: 100,
+  boring: false,
+  boringType: 'pixel',
+  square: false,
+  alt: 'Maria Rincon',
+  url:
+    'https://taikai.azureedge.net/O4f7yrc0ecq0JUEirIk1sZ2XItEpJ-xrIr2W03kRrJs/rs:fit:400:400:0/g:no/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3RhaWthaS1zdG9yYWdlL2ltYWdlcy90YWlrYWkvbWFyaWFfNDAwXzQwMC5qcGc.jpg',
+};
+
+export const SVG = (args: AvatarProps) => <AvatarImage {...args} />;
+
+SVG.args = {
+  size: 100,
+  boring: false,
+  boringType: 'pixel',
+  square: false,
+  alt: 'Default Avatar',
+  url: './images/default-avatar.svg',
+};
+
+export const BoringAvatar = (args: AvatarProps) => <AvatarImage {...args} />;
+
+BoringAvatar.args = {
+  size: 100,
+  boring: true,
+  boringType: 'pixel',
+  square: false,
+  alt: 'Maria Rincon',
+  url: '',
+};

src/atoms/avatar-image/styles.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components/macro';
+import { colors } from '../../ions/variables';
+
+const { normal } = colors;
+
+interface AvatarProps {
+  size?: number;
+  square?: boolean;
+}
+
+export const Wrapper = styled.div<AvatarProps>`
+  position: relative;
+  border: 1px solid ${normal};
+  border-radius: ${props => (props.square ? 0 : '999px')};
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
+  overflow: hidden;
+  z-index: 0;
+
+  > * {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+
+  img {
+    object-fit: cover;
+  }
+`;

src/index.ts

@@ -1,5 +1,5 @@
 // Atoms
-export { default as Avatar } from './atoms/avatar';
+export { default as AvatarImage } from './atoms/avatar-image';
 export { default as Button } from './atoms/button';
 export { default as ButtonLink } from './atoms/button-link';
 export { default as Checkbox } from './atoms/checkbox';

src/molecules/table/__tests__/__snapshots__/table.test.tsx.snap

@@ -3,12 +3,24 @@
 exports[`Table renders 1`] = `
 <DocumentFragment>
   .c1 {
+  position: relative;
   border: 1px solid hsl(0,0%,16%);
   border-radius: 999px;
-  width: 1.875rem;
-  height: 1.875rem;
-  object-fit: cover;
+  width: 30px;
+  height: 30px;
   overflow: hidden;
+  z-index: 0;
+}
+
+.c1 > * {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.c1 img {
+  object-fit: cover;
 }
 
 .c3 {
@@ -238,8 +250,8 @@ exports[`Table renders 1`] = `
   align-items: center;
 }
 
-.c0 th.avatar > div img,
-.c0 td.avatar > div img {
+.c0 th.avatar > div .avatar-img,
+.c0 td.avatar > div .avatar-img {
   margin-right: 0.9375rem;
 }
 
@@ -375,7 +387,7 @@ exports[`Table renders 1`] = `
   max-height: 1.25rem;
 }
 
-.c0 tbody td img {
+.c0 tbody td .avatar-img {
   display: none;
 }
 
@@ -477,7 +489,7 @@ exports[`Table renders 1`] = `
     max-width: 6.25rem;
   }
 
-  .c0 tbody td img {
+  .c0 tbody td .avatar-img {
     display: inherit;
   }
 
@@ -526,11 +538,15 @@ exports[`Table renders 1`] = `
           data-testid="td-undefined"
         >
           <div>
-            <img
-              alt="To the Moon"
-              class="c1 tk-avatar"
-              src="./images/default-avatar.svg"
-            />
+            <div
+              class="c1 avatar-img"
+              size="30"
+            >
+              <img
+                alt="To the Moon"
+                src="./images/default-avatar.svg"
+              />
+            </div>
              To the Moon
           </div>
         </td>

src/molecules/table/__tests__/table.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import 'jest-styled-components';
 import { ActionMenu } from '../../actions-menu/types';
-import { Avatar, Table } from '../../..';
+import { AvatarImage, Table } from '../../..';
 
 describe('Table', () => {
   it('renders', () => {
@@ -47,7 +47,7 @@ describe('Table', () => {
           dataKey: 'transactionName',
           renderer: (transactionName: string, cell: CellData) => (
             <>
-              <Avatar url={cell.avatar} alt={transactionName} />{' '}
+              <AvatarImage url={cell.avatar} alt={transactionName} />{' '}
               {transactionName}
             </>
           ),

src/molecules/table/stories/table.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Table from '..';
-import { Avatar } from '../../..';
+import { AvatarImage } from '../../..';
 import { ActionMenu } from '../../actions-menu/types';
 
 export interface TableProps {
@@ -49,7 +49,7 @@ const columns = {
       dataKey: 'transactionName',
       renderer: (transactionName: string, { avatar }: { avatar: string }) => (
         <>
-          <Avatar url={avatar} alt={transactionName} /> {transactionName}
+          <AvatarImage url={avatar} alt={transactionName} /> {transactionName}
         </>
       ),
       className: 'avatar',
@@ -82,23 +82,23 @@ const rows: Transaction[] = [
     amount: '2700',
     type: 'Back',
     createdAt: '2018-07-7 16:21:13',
-    avatar: './images/default-avatar.svg',
+    avatar: '',
   },
   {
     id: '2',
     transactionName: 'To the Moon',
     amount: '2000',
     type: 'Back',
     createdAt: '2018-07-7 15:46:19',
-    avatar: './images/default-avatar.svg',
+    avatar: '',
   },
   {
     id: '3',
     transactionName: 'To the Moon',
     amount: '5000',
     type: 'Back',
     createdAt: '2018-07-7 14:47:50',
-    avatar: './images/default-avatar.svg',
+    avatar: '',
   },
   {
     id: '4',