Create new project_avatar component

Adds a new project_avatar component,
based on GitLab-ui GlAvatar

app/assets/javascripts/vue_shared/components/project_avatar.stories.js

+import ProjectAvatar from './project_avatar.vue';
+
+export default {
+  component: ProjectAvatar,
+  title: 'vue_shared/components/project_avatar',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { ProjectAvatar },
+  props: Object.keys(argTypes),
+  template: '<project-avatar v-bind="$props" v-on="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  projectAvatarUrl:
+    'https://gitlab.com/uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64',
+  projectName: 'GitLab',
+};
+
+export const FallbackAvatar = Template.bind({});
+FallbackAvatar.args = {
+  projectName: 'GitLab',
+};

app/assets/javascripts/vue_shared/components/project_avatar.vue

+<script>
+import { GlAvatar } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAvatar,
+  },
+  props: {
+    projectName: {
+      type: String,
+      required: true,
+    },
+    projectAvatarUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    size: {
+      type: Number,
+      default: 32,
+      required: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-avatar
+    shape="rect"
+    :entity-name="projectName"
+    :src="projectAvatarUrl"
+    :alt="projectName"
+    :size="size"
+  />
+</template>

spec/frontend/vue_shared/components/project_avatar_spec.js

+import { GlAvatar } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
+
+const defaultProps = {
+  projectName: 'GitLab',
+};
+
+describe('ProjectAvatar', () => {
+  let wrapper;
+
+  const findGlAvatar = () => wrapper.findComponent(GlAvatar);
+
+  const createComponent = ({ props } = {}) => {
+    wrapper = shallowMount(ProjectAvatar, { propsData: { ...defaultProps, ...props } });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders GlAvatar with correct props', () => {
+    createComponent();
+
+    const avatar = findGlAvatar();
+    expect(avatar.exists()).toBe(true);
+    expect(avatar.props()).toMatchObject({
+      alt: defaultProps.projectName,
+      entityName: defaultProps.projectName,
+      size: 32,
+      src: '',
+    });
+  });
+
+  describe('with `size` prop', () => {
+    it('renders GlAvatar with specified `size` prop', () => {
+      const mockSize = 48;
+      createComponent({ props: { size: mockSize } });
+
+      const avatar = findGlAvatar();
+      expect(avatar.props('size')).toBe(mockSize);
+    });
+  });
+
+  describe('with `projectAvatarUrl` prop', () => {
+    it('renders GlAvatar with specified `src` prop', () => {
+      const mockProjectAvatarUrl = 'https://gitlab.com';
+      createComponent({ props: { projectAvatarUrl: mockProjectAvatarUrl } });
+
+      const avatar = findGlAvatar();
+      expect(avatar.props('src')).toBe(mockProjectAvatarUrl);
+    });
+  });
+});