feat(avatar): added image position option

.changeset/clever-rivers-compete.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+feat(avatar): added image position option

src/components/ebay-avatar/avatar.stories.ts

@@ -7,6 +7,9 @@ import avatar from "./index.marko";
 import Readme from "./README.md";
 import imageTemplate from "./examples/image.marko";
 import imageTemplateCode from "./examples/image.marko?raw";
+import autoImageTemplate from "./examples/with-auto-placement.marko";
+import autoImageTemplateCode from "./examples/with-auto-placement.marko?raw";
+
 import { Story } from "@storybook/marko";
 import type { Input } from "./index.marko";
 
@@ -37,12 +40,7 @@ export default {
                 "magenta",
                 "pink",
             ],
-            table: {
-                defaultValue: {
-                    summary: "teal",
-                },
-            },
-            type: { category: "Options" },
+            type: "select",
             description:
                 "The color to color the background. This can be only used in the non icon/image case. This is used simply as an override to the username hash",
         },
@@ -53,8 +51,7 @@ export default {
                     summary: "48",
                 },
             },
-            type: { category: "Options" },
-
+            type: "select",
             description:
                 "The pixel size of the avatar. Can only be specific sizes",
         },
@@ -67,13 +64,19 @@ export default {
             description:
                 'The label to describe the users state as well as their user name. Usually in the format of "Signed in as Bob" or "Signed out"',
         },
+        knownAspectRatio: {
+            control: { type: "number" },
+            description:
+                "Optional, as aspect ratio will be calculated when the image loads on the client. This can be passed to help prevent a flash of incorrectly styled content before the image loads",
+        },
     },
 };
 
 export const Default = Template.bind({});
 Default.args = {
     a11yText: "Signed in - as Elizabeth",
     username: "Elizabeth",
+    color: "teal",
 };
 
 Default.parameters = {
@@ -93,6 +96,15 @@ export const WithImage = buildExtensionTemplate(
     },
 );
 
+export const WithAutoPlacement = buildExtensionTemplate(
+    autoImageTemplate,
+    autoImageTemplateCode,
+    {
+        a11yText: "Signed in - as Doggy",
+        username: "Doggy",
+    },
+);
+
 export const SignedOut = Template.bind({});
 SignedOut.args = {
     a11yText: "Signed out",

src/components/ebay-avatar/component.ts

@@ -0,0 +1,44 @@
+import type { WithNormalizedProps } from "../../global";
+import type { AttrString } from "marko/tags-html";
+
+type Size = 32 | 40 | 48 | 56 | 64 | 96 | 128;
+
+type ImagePlacement = "cover" | "fit";
+
+interface State {
+    imagePlacement: ImagePlacement;
+}
+
+interface AvatarInput extends Omit<Marko.HTML.Div, `on${string}`> {
+    username?: string;
+    color?: string;
+    "a11y-text"?: AttrString;
+    size?: Size | `${Size}`;
+    img?: Marko.AttrTag<Omit<Marko.HTML.Img, `on${string}`>>;
+    "known-aspect-ratio"?: number;
+}
+
+export interface Input extends WithNormalizedProps<AvatarInput> {}
+
+class Avatar extends Marko.Component<Input, State> {
+    onCreate(input: Input) {
+        this.state = {
+            imagePlacement:
+                input.knownAspectRatio &&
+                (input.knownAspectRatio < 3 / 4 ||
+                    input.knownAspectRatio > 4 / 3)
+                    ? "fit"
+                    : "cover",
+        };
+    }
+    handleImageLoad(_event: Event, el: HTMLImageElement) {
+        const aspectRatio = el.naturalWidth / el.naturalHeight;
+        if (aspectRatio < 3 / 4 || aspectRatio > 4 / 3) {
+            this.state.imagePlacement = "fit";
+        } else {
+            this.state.imagePlacement = "cover";
+        }
+    }
+}
+
+export default Avatar;

src/components/ebay-avatar/examples/default.marko

@@ -1 +1 @@
-<ebay-avatar a11yText="Signed in as Elizabeth" username="Elizabeth"></ebay-avatar>
+<ebay-avatar a11yText="Signed in as Elizabeth" color="teal" username="Elizabeth"></ebay-avatar>

src/components/ebay-avatar/examples/with-auto-placement.marko

@@ -0,0 +1,24 @@
+<div>
+    <ebay-avatar a11yText="Signed in as Doggy" ...input>
+        <@img
+            src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile2.png"
+            alt="my photo"
+        />
+    </ebay-avatar>
+</div>
+<div>
+    <ebay-avatar a11yText="Signed in as Doggy" ...input>
+        <@img
+            src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile3.png"
+            alt="my photo"
+        />
+    </ebay-avatar>
+</div>
+<div>
+    <ebay-avatar a11yText="Signed in as Doggy" ...input>
+        <@img
+            src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile4.png"
+            alt="my photo"
+        />
+    </ebay-avatar>
+</div>

src/components/ebay-avatar/index.marko

@@ -1,19 +1,5 @@
 import { processHtmlAttributes } from "../../common/html-attributes";
 import { getColorForText } from "./util";
-import type { WithNormalizedProps } from "../../global";
-import type { AttrString } from "marko/tags-html";
-
-static type Size = 32 | 40 | 48 | 56 | 64 | 96 | 128;
-
-static interface AvatarInput extends Omit<Marko.HTML.Div, `on${string}`> {
-    username?: string;
-    color?: string;
-    "a11y-text"?: AttrString;
-    size?: Size | `${Size}`;
-    img?: Marko.AttrTag<Omit<Marko.HTML.Img, `on${string}`>>;
-}
-
-export interface Input extends WithNormalizedProps<AvatarInput> {}
 
 $ const {
     a11yText,
@@ -32,13 +18,14 @@ $ const {
     aria-label=a11yText
     class=[
         "avatar",
+        state.imagePlacement === "fit" && "avatar--fit",
         inputClass,
         size && `avatar--${size}`,
-        `avatar--${getColorForText(username, color)}`,
+        username && !img && `avatar--${getColorForText(username, color)}`,
     ]
 >
     <if(img)>
-        <img ...img>
+        <img onLoad("handleImageLoad") ...img>
     </if>
 
     <else-if(renderBody)>

src/components/ebay-avatar/test/__snapshots__/test.server.js.snap

@@ -28,18 +28,15 @@ exports[`avatar > renders signed out 1`] = `
 "<DocumentFragment>
   <div
     aria-label="Signed out"
-    class="avatar avatar--teal"
+    class="avatar"
     role="img"
   >
     <svg
       aria-hidden="true"
       class="icon icon--avatar-signed-out"
-      data-marko-key="@svg s0-3-0"
       focusable="false"
     >
-      <defs
-        data-marko-key="@defs s0-3-0"
-      >
+      <defs>
         <symbol
           id="icon-avatar-signed-out"
           viewBox="0 0 40 40"
@@ -86,7 +83,7 @@ exports[`avatar > renders with doggy as username 1`] = `
 "<DocumentFragment>
   <div
     aria-label="Signed in - as Elizabeth"
-    class="avatar avatar--magenta"
+    class="avatar avatar--teal"
     role="img"
   >
     D
@@ -98,7 +95,7 @@ exports[`avatar > renders with image 1`] = `
 "<DocumentFragment>
   <div
     aria-label="Signed in - as Doggy"
-    class="avatar avatar--magenta"
+    class="avatar"
     role="img"
   >
     <img
@@ -113,7 +110,7 @@ exports[`avatar > renders with robert as username 1`] = `
 "<DocumentFragment>
   <div
     aria-label="Signed in - as Elizabeth"
-    class="avatar avatar--magenta"
+    class="avatar avatar--teal"
     role="img"
   >
     R
@@ -125,7 +122,7 @@ exports[`avatar > renders with test as usernames 1`] = `
 "<DocumentFragment>
   <div
     aria-label="Signed in - as Elizabeth"
-    class="avatar avatar--green"
+    class="avatar avatar--teal"
     role="img"
   >
     T