feat(avatar): update to new visual language

.changeset/moody-banks-study.md

@@ -0,0 +1,10 @@
+---
+"@stackoverflow/stacks": patch
+"@stackoverflow/stacks-svelte": patch
+---
+
+**Avatar Updates:**
+
+- **Stacks Classic**: Made avatar border squared. Introduced `.s-avatar--indicator` class for positioning an activity indicator element in relation to the avatar. 
+
+- **Stacks Svelte**: Introduced a new `status` prop. When set to `online` it will show an activity indicator on the avatar.

packages/stacks-classic/lib/components/avatar/avatar.a11y.test.ts

@@ -16,6 +16,17 @@ const getChild = (child?: string): string => {
                 aria-hidden="true">
                     S
             </div>${srEl}`;
+        case "indicator":
+            return `<img
+                class="s-avatar--image"
+                src="https://picsum.photos/id/1/48"
+                alt="team logo"
+            />${srEl}
+            <div
+                class="s-avatar--indicator s-activity-indicator s-activity-indicator__sm s-activity-indicator__success"
+            >
+                <div class="v-visible-sr">Online</div>
+            </div>`;
         default:
             return srEl;
     }
@@ -29,7 +40,11 @@ describe("avatar", () => {
             default: getChild(),
             image: getChild("image"),
             letter: getChild("letter"),
+            indicator: getChild("indicator"),
         },
+        excludedTestids: [
+            /^s-avatar-(?=.*(32|48|64|96|128)).*-indicator.*$/, // s-avatar with indicator and 32 48 64 96 128 sizes not supported
+        ],
         tag: "span",
     });
 });

packages/stacks-classic/lib/components/avatar/avatar.less

@@ -1,7 +1,6 @@
 .s-avatar {
     --_av-size: var(--su-static16);
     --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
-    --_av-br: var(--br-sm);
     --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
     --_av-scale-badge: 1;
 
@@ -18,14 +17,8 @@
 
     // MODIFIERS
     // Sizes
-    &&__32,
-    &&__48 {
-        --_av-br: var(--br-md);
-    }
-
     &&__96,
     &&__128 {
-        --_av-br: calc(var(--br-lg) + var(--br-sm));
         --_av-scale-badge: 3;
     }
 
@@ -49,7 +42,6 @@
 
     &&__64 {
         --_av-size: var(--su-static64);
-        --_av-br: var(--br-lg);
         --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
         --_av-scale-badge: 2.4;
     }
@@ -74,7 +66,6 @@
     }
 
     & &--image {
-        border-radius: var(--_av-br);
         display: block;
         height: var(--_av-size);
         width: var(--_av-size);
@@ -95,8 +86,15 @@
         user-select: none;
     }
 
-    background-color: var(--_av-bg); 
-    border-radius: var(--_av-br);
+    & &--indicator {
+        box-shadow: 0 0 0 var(--su-static2) var(--white);
+        bottom: 100%;
+        left: 100%;
+        position: absolute;
+        transform: translate(-50%, 60%);
+    }
+
+    background-color: var(--_av-bg);
     height: var(--_av-size);
     width: var(--_av-size);
 

packages/stacks-classic/lib/components/avatar/avatar.visual.test.ts

@@ -20,6 +20,17 @@ const getChild = (child?: string): string => {
                 aria-hidden="true">
                     S
             </div>${srEl}`;
+        case "indicator":
+            return `<img
+                class="s-avatar--image"
+                src="${base64Image}"
+                alt="team logo"
+            />${srEl}
+            <div
+                class="s-avatar--indicator s-activity-indicator s-activity-indicator__sm s-activity-indicator__success"
+            >
+                <div class="v-visible-sr">Online</div>
+            </div>`;
         default:
             return srEl;
     }
@@ -33,11 +44,15 @@ describe("avatar", () => {
             default: getChild(),
             image: getChild("image"),
             letter: getChild("letter"),
+            indicator: getChild("indicator"),
         },
         attributes: {
             href: "#",
         },
         tag: "a",
+        excludedTestids: [
+            /^s-avatar-(?=.*(32|48|64|96|128)).*-indicator.*$/, // s-avatar with indicator and 32 48 64 96 128 sizes not supported
+        ],
         template: ({ component, testid }) => html`
             <div
                 data-testid="${testid}"