feat(uui-card): Adds checkbox for selection

packages/uui-card-block-type/lib/uui-card-block-type.element.ts

@@ -49,18 +49,19 @@ export class UUICardBlockTypeElement extends UUICardElement {
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
-
+      ${this.selectable ? this.renderCheckbox() : nothing}
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;
   }
 
   #renderButton() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <button
         id="open-part"
         class="uui-text"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
         ${this.#renderContent()}
@@ -69,19 +70,16 @@ export class UUICardBlockTypeElement extends UUICardElement {
   }
 
   #renderLink() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;
     return html`
       <a
         id="open-part"
         class="uui-text"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
-        rel=${ifDefined(
-          this.rel ||
-            ifDefined(
-              this.target === '_blank' ? 'noopener noreferrer' : undefined,
-            ),
-        )}>
+        rel=${ifDefined(this.rel || rel)}>
         ${this.#renderContent()}
       </a>
     `;
@@ -97,7 +95,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
     return html`
       <div id="content">
         <span title="${this.name}" id="name">${this.name}</span>
-        <small title="${this.description}">${this.description}<slot name="description"></slot></small>
+        <small title="${ifDefined(this.description)}">${this.description}<slot name="description"></slot></small>
       </div></div>
     `;
   }

packages/uui-card-block-type/lib/uui-card-block-type.story.ts

@@ -70,8 +70,19 @@ export const Background: Story = {
 
 export const Image: Story = {
   args: {
-    slot: html`<img
-      src="https://umbraco.com/media/v5gf3w2a/umbraco-toolkit-wide.svg"
-      alt="" />`,
+    slot: html`<img src="https://placedog.net/1447/?random" alt="" />`,
+  },
+};
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
+};
+
+export const OnlySelectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
   },
 };

packages/uui-card-content-node/lib/uui-card-content-node.element.ts

@@ -86,37 +86,39 @@ export class UUICardContentNodeElement extends UUICardElement {
   }
 
   #renderButton() {
-    return html`<button
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : 0}
-      @click=${this.handleOpenClick}
-      @keydown=${this.handleOpenKeydown}>
-      ${this.#renderContent()}
-    </button>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <button
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${this.#renderContent()}
+      </button>
+    `;
   }
 
   #renderLink() {
-    return html`<a
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : 0}
-      href=${ifDefined(!this.disabled ? this.href : undefined)}
-      target=${ifDefined(this.target || undefined)}
-      rel=${ifDefined(
-        this.rel ||
-          ifDefined(
-            this.target === '_blank' ? 'noopener noreferrer' : undefined,
-          ),
-      )}>
-      ${this.#renderContent()}
-    </a>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;
+    return html`
+      <a
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        href=${ifDefined(!this.disabled ? this.href : undefined)}
+        target=${ifDefined(this.target || undefined)}
+        rel=${ifDefined(this.rel || rel)}>
+        ${this.#renderContent()}
+      </a>
+    `;
   }
 
   public render() {
     return html`
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
-
+      ${this.selectable ? this.renderCheckbox() : nothing}
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;
@@ -226,6 +228,11 @@ export class UUICardContentNodeElement extends UUICardElement {
       :host(:not([disabled])) #open-part:hover #default {
         color: var(--uui-color-interactive-emphasis);
       }
+
+      #select-checkbox {
+        top: var(--uui-size-5);
+        left: var(--uui-size-6);
+      }
     `,
   ];
 }

packages/uui-card-content-node/lib/uui-card-content-node.story.ts

@@ -76,3 +76,16 @@ export const CustomIcon: Story = {
     'icon slot': html`<uui-icon slot="icon" name="wand"></uui-icon>`,
   },
 };
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
+};
+
+export const OnlySelectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
+  },
+};

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

@@ -71,10 +71,11 @@ export class UUICardMediaElement extends UUICardElement {
   }
 
   #renderButton() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <button
         id="open-part"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
         ${this.#renderContent()}
@@ -83,18 +84,15 @@ export class UUICardMediaElement extends UUICardElement {
   }
 
   #renderLink() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;
     return html`
       <a
         id="open-part"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
-        rel=${ifDefined(
-          this.rel ||
-            ifDefined(
-              this.target === '_blank' ? 'noopener noreferrer' : undefined,
-            ),
-        )}>
+        rel=${ifDefined(this.rel || rel)}>
         ${this.#renderContent()}
       </a>
     `;
@@ -118,7 +116,7 @@ export class UUICardMediaElement extends UUICardElement {
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after .open-part -->
       <div id="select-border"></div>
-
+      ${this.selectable ? this.renderCheckbox() : nothing}
       <slot name="tag"></slot>
       <slot name="actions"></slot>`;
   }
@@ -208,7 +206,6 @@ export class UUICardMediaElement extends UUICardElement {
       #content {
         position: relative;
         display: flex;
-        width: 100%;
         flex-direction: column;
         font-family: inherit;
         box-sizing: border-box;

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

@@ -92,3 +92,16 @@ export const Image: Story = {
     chromatic: { disableSnapshot: true },
   },
 };
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
+};
+
+export const OnlySelectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
+  },
+};

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

@@ -40,53 +40,58 @@ export class UUICardUserElement extends UUICardElement {
   }
 
   #renderButton() {
-    return html`<div
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : '0'}
-      @click=${this.handleOpenClick}
-      @keydown=${this.handleOpenKeydown}>
-      ${this.#renderContent()}
-    </div>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <div
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${this.#renderContent()}
+      </div>
+    `;
   }
 
   #renderLink() {
-    return html`<a
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : '0'}
-      href=${ifDefined(!this.disabled ? this.href : undefined)}
-      target=${ifDefined(this.target || undefined)}
-      rel=${ifDefined(
-        this.rel ||
-          ifDefined(
-            this.target === '_blank' ? 'noopener noreferrer' : undefined,
-          ),
-      )}>
-      ${this.#renderContent()}
-    </a>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;
+    return html`
+      <a
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        href=${ifDefined(!this.disabled ? this.href : undefined)}
+        target=${ifDefined(this.target || undefined)}
+        rel=${ifDefined(this.rel || rel)}>
+        ${this.#renderContent()}
+      </a>
+    `;
   }
 
   #renderContent() {
-    return html`<div id="content">
-      ${this._avatarSlotHasContent
-        ? nothing
-        : html`<uui-avatar
-            class="avatar"
-            name=${this.name}
-            size="m"></uui-avatar>`}
-      <slot
-        name="avatar"
-        class="avatar"
-        @slotchange=${this._avatarSlotChanged}></slot>
-      <span title="${this.name}">${this.name}</span>
-      <slot></slot>
-    </div>`;
+    return html`
+      <div id="content">
+        ${this._avatarSlotHasContent
+          ? nothing
+          : html`<uui-avatar
+              class="avatar"
+              name=${this.name}
+              size="m"></uui-avatar>`}
+        <slot
+          name="avatar"
+          class="avatar"
+          @slotchange=${this._avatarSlotChanged}></slot>
+        <span title="${this.name}">${this.name}</span>
+        <slot></slot>
+      </div>
+    `;
   }
 
   public render() {
     return html`
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
+      ${this.selectable ? this.renderCheckbox() : nothing}
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;

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

@@ -76,3 +76,16 @@ export const Actions: Story = {
     >`,
   },
 };
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
+};
+
+export const OnlySelectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
+  },
+};