feat(atoms): adds avatar component

Adds a simple avatar element for styles

closes #139

.storybook/preview.js

@@ -1,10 +1,24 @@
 import createCache from '@emotion/cache';
 import { CacheProvider, Global, ThemeProvider } from '@emotion/react';
+import * as NextImage from 'next/image';
 import { global } from '@styles/global';
 import { theme } from '@styles/theme';
 
 const cache = createCache({ key: 'css', prepend: true });
 
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: (props) => (
+    <OriginalNextImage
+      {...props}
+      unoptimized
+      blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAADAAQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAbEAADAAMBAQAAAAAAAAAAAAABAgMABAURUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAECEf/aAAwDAQACEQMRAD8Anz9voy1dCI2mectSE5ioFCqia+KCwJ8HzGMZPqJb1oPEf//Z"
+    />
+  ),
+});
+
 export const decorators = [
   (Story) => {
     return (
@@ -19,11 +33,11 @@ export const decorators = [
 ];
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

src/components/atoms/Avatar/Avatar.jsx

@@ -0,0 +1,24 @@
+import Image from 'next/image';
+import PropTypes from 'prop-types';
+import { frame, image } from './styles';
+
+export function Avatar({ className, width, height, ...props }) {
+  return (
+    <div data-testid="avatar" className={className} css={frame}>
+      <Image {...props} layout="fill" css={image} />
+    </div>
+  );
+}
+
+Avatar.propTypes = {
+  ...Image.propTypes,
+  src: PropTypes.oneOfType([PropTypes.string, PropTypes.shape]).isRequired,
+  className: PropTypes.string,
+};
+
+Avatar.defaultProps = {
+  ...Image.defaultProps,
+  className: '',
+};
+
+export default Avatar;

src/components/atoms/Avatar/Avatar.stories.jsx

@@ -0,0 +1,16 @@
+import { Avatar } from './Avatar';
+
+export default {
+  component: Avatar,
+  title: 'Components/Atoms/Avatar',
+};
+
+const Template = (args) => <Avatar {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  src: 'https://picsum.photos/200',
+  alt: 'Example Name',
+  width: 100,
+};

src/components/atoms/Avatar/Avatar.test.jsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { Avatar } from './Avatar';
+
+describe('<Avatar />', () => {
+  it('should render an img', () => {
+    expect.assertions(3);
+
+    const src = 'https://example.com/images/profile.png';
+    const alt = 'Example Name';
+
+    render(<Avatar src={src} alt={alt} className="test-class" />);
+
+    expect(screen.getByRole('img')).toHaveAttribute('src');
+
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Example Name');
+
+    expect(screen.getByTestId('avatar')).toHaveClass('test-class');
+  });
+});

src/components/atoms/Avatar/index.js

@@ -0,0 +1,5 @@
+import { Avatar } from './Avatar';
+
+export * from './Avatar';
+
+export default Avatar;

src/components/atoms/Avatar/styles.js

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+
+export const frame = css`
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+  box-shadow: var(--elevation-medium);
+  width: 100%;
+  aspect-ratio: 1 / 1;
+`;
+
+export const image = css`
+  overflow: hidden;
+  border-radius: 50%;
+`;