Feature: User Card Avatar image (#690)

Co-authored-by: Niels Lyngsø <[email protected]>

Author: madsrasmussen

packages/uui-base/lib/utils/index.ts

@@ -3,3 +3,4 @@ export * from './demandCustomElement';
 export * from './drag';
 export * from './math';
 export * from './findAncestorByAttributeValue';
+export * from './slotHasContent';

packages/uui-base/lib/utils/slotHasContent.ts

@@ -0,0 +1,5 @@
+export function slotHasContent(target: EventTarget | null): boolean {
+  return target
+    ? (target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0
+    : false;
+}

packages/uui-card-user/lib/uui-card-user.element.ts

@@ -1,8 +1,11 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import {
+  demandCustomElement,
+  slotHasContent,
+} from '@umbraco-ui/uui-base/lib/utils';
 import { UUICardElement } from '@umbraco-ui/uui-card/lib';
 import { css, html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
@@ -23,6 +26,12 @@ export class UUICardUserElement extends UUICardElement {
   @property({ type: String })
   name = '';
 
+  @state()
+  private _avatarSlotHasContent = false;
+  private _avatarSlotChanged = (e: Event) => {
+    this._avatarSlotHasContent = slotHasContent(e.target);
+  };
+
   connectedCallback(): void {
     super.connectedCallback();
 
@@ -54,7 +63,16 @@ export class UUICardUserElement extends UUICardElement {
 
   public render() {
     return html`
-      <uui-avatar id="avatar" name=${this.name} size="m"></uui-avatar>
+      ${this._avatarSlotHasContent
+        ? nothing
+        : html`<uui-avatar
+            id="avatar"
+            name=${this.name}
+            size="m"></uui-avatar>`}
+      <slot
+        name="avatar"
+        id="avatar"
+        @slotchange=${this._avatarSlotChanged}></slot>
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <slot></slot>
       <slot name="tag"></slot>

packages/uui-card-user/lib/uui-card-user.story.ts

@@ -166,3 +166,27 @@ Tags.parameters = {
     },
   },
 };
+
+export const Avatar: StoryFn = () => html`
+  <uui-card-user name="John Rabbit">
+    <uui-avatar
+      slot="avatar"
+      size="m"
+      name="John Rabbit"
+      img-src="https://placedog.net/120/?random"></uui-avatar>
+    ${cardContent}
+  </uui-card-user>
+`;
+
+Tags.parameters = {
+  docs: {
+    source: {
+      code: `
+<uui-card-user name="John Rabbit">
+  <uui-avatar slot="avatar" size="m" name="John Rabbit" src="https://placedog.net/120/?random"></uui-avatar>
+
+  <!-- Content -->
+</uui-card-user>`,
+    },
+  },
+};

packages/uui-card-user/lib/uui-card-user.test.ts

@@ -67,6 +67,11 @@ describe('UUICardUserElement', () => {
       const slot = element.shadowRoot!.querySelector('slot[name=actions]')!;
       expect(slot).to.exist;
     });
+
+    it('renders an avatar slot', () => {
+      const slot = element.shadowRoot!.querySelector('slot[name=avatar]')!;
+      expect(slot).to.exist;
+    });
   });
 
   describe('events', () => {