[CL-7] Avatar (#3153)

* CL-7 Begin Implementing Avatar

* add figma design to parameters

* rework size property

* Update Figma file to correct component

* remove circle input (avatar will always be a circle)

* adjust sizing and limit inputs

* Setup color input and functionality

* Add border option

* fix bug duplicating classes

* Update size for large avatar

* Remove unnecessary class

* Fix typo

* Remove 'dynamic' input (Avatar will now regenerate on changes by default)

* Use Tailwind class instead of an arbitrary value

* Remove gravatars (deprecated, see SG-434)

* Rename methods to a more accurate name

* Rework classList() getter method

* Remove unnecessary logic and services

* Make properties private, and rename for better clarity

* Move sanitizer logic to the TS code rather than the template

* Rework and move function to a common static class in Utils

* Rename 'data' to 'text' for clarity

* Rework classList implementation

* Remove email since we removed gravatars

* Remove template

* set color based on color, id, or text input

* rework generate method

* add explicit null/undefined check

* remove comment

Co-authored-by: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>

libs/components/src/avatar/avatar.stories.ts

@@ -0,0 +1,60 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { AvatarComponent } from "./avatar.component";
+
+export default {
+  title: "Component Library/Avatar",
+  component: AvatarComponent,
+  args: {
+    text: "Walt Walterson",
+    size: "default",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A16994",
+    },
+  },
+} as Meta;
+
+const Template: Story<AvatarComponent> = (args: AvatarComponent) => ({
+  props: args,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  color: "#175ddc",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  ...Default.args,
+  size: "large",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  ...Default.args,
+  size: "small",
+};
+
+export const LightBackground = Template.bind({});
+LightBackground.args = {
+  color: "#d2ffcf",
+};
+
+export const Border = Template.bind({});
+Border.args = {
+  ...Default.args,
+  border: true,
+};
+
+export const ColorByID = Template.bind({});
+ColorByID.args = {
+  id: 236478,
+};
+
+export const ColorByText = Template.bind({});
+ColorByText.args = {
+  text: "Jason Doe",
+};