feat: Avatar component

packages/storybook/.storybook/main.ts

@@ -33,5 +33,5 @@ export default defineMain({
       },
     } satisfies UserConfig);
   },
-  staticDirs: ["../public"],
+  staticDirs: ["../public", "../../ui-webc/dist/ui-webc/assets"],
 });

packages/storybook/src/stories/avatar.stories.tsx

@@ -0,0 +1,21 @@
+import { ScoutAvatar } from "@scouterna/ui-react";
+import preview from "#.storybook/preview";
+
+const meta = preview.meta({
+  title: "Basics/Avatar",
+  component: ScoutAvatar,
+  parameters: {
+    layout: "centered",
+  },
+});
+
+export default meta;
+
+export const BasicExample = meta.story({
+  args: {},
+  render: (args) => (
+    <div style={{ width: "200px" }}>
+      <ScoutAvatar {...args} />
+    </div>
+  ),
+});

packages/ui-webc/src/components/avatar/avatar.css

@@ -0,0 +1,7 @@
+:host {
+  display: flex;
+  aspect-ratio: 1 / 1;
+}
+img {
+  border-radius: 50%;
+}

packages/ui-webc/src/components/avatar/avatar.tsx

@@ -0,0 +1,51 @@
+import {
+  Component,
+  type ComponentInterface,
+  getAssetPath,
+  h,
+  Prop,
+} from "@stencil/core";
+
+/**
+ * The avatar component is used to display the user's profile picture.
+ * Wrap it with a container, to determine its size, since it scales to fit container.
+ */
+@Component({
+  tag: "scout-avatar",
+  styleUrl: "avatar.css",
+  shadow: {
+    delegatesFocus: true,
+  },
+  assetsDirs: ["assets"],
+})
+
+/**
+ *
+ */
+export class ScoutAvatar implements ComponentInterface {
+  /**
+   * The source URL of the user image.
+   */
+  @Prop() imageSrc = "";
+
+  /**
+   * The name of the user.
+   */
+  @Prop() alt = "";
+
+  render() {
+    const getImagePath = () => {
+      if (this.imageSrc) {
+        return this.imageSrc;
+      }
+      try {
+        return getAssetPath("assets/fallbackImage.png");
+      } catch (_e) {
+        console.info("In storybook, rendering from storybook asset");
+        return "fallbackImage.png";
+      }
+    };
+
+    return <img src={getImagePath()} alt={this.alt} />;
+  }
+}

packages/ui-webc/src/components/avatar/readme.md

@@ -0,0 +1,21 @@
+# scout-avatar
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+The avatar component is used to display the user's profile picture.
+Wrap it with a container, to determine its size, since it scales to fit container.
+
+## Properties
+
+| Property   | Attribute   | Description                       | Type     | Default |
+| ---------- | ----------- | --------------------------------- | -------- | ------- |
+| `alt`      | `alt`       | The name of the user.             | `string` | `""`    |
+| `imageSrc` | `image-src` | The source URL of the user image. | `string` | `""`    |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*