feat(uui-card): Adds checkbox for selection

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

@@ -49,7 +49,7 @@ 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>
     `;

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

@@ -70,8 +70,13 @@ 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,
+    selectOnly: true,
   },
 };

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

@@ -116,7 +116,7 @@ export class UUICardContentNodeElement 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>
     `;
@@ -226,6 +226,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,10 @@ export const CustomIcon: Story = {
     'icon slot': html`<uui-icon slot="icon" name="wand"></uui-icon>`,
   },
 };
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
+  },
+};

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

@@ -118,7 +118,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 +208,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,10 @@ export const Image: Story = {
     chromatic: { disableSnapshot: true },
   },
 };
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
+  },
+};

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

@@ -87,6 +87,7 @@ export class UUICardUserElement 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>
     `;

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

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

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

@@ -9,6 +9,8 @@ import { property } from 'lit/decorators.js';
 
 import { UUICardEvent } from './UUICardEvent';
 
+import '@umbraco-ui/uui-checkbox/lib';
+
 /**
  *  Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.
  *  @element uui-card
@@ -83,6 +85,19 @@ export class UUICardElement extends SelectOnlyMixin(
     this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
   }
 
+  protected renderCheckbox() {
+    if (!this.selectable) return;
+    return html`
+      <uui-checkbox
+        id="select-checkbox"
+        label="select"
+        ?checked=${this.selected}
+        @click=${(e: MouseEvent) => e.stopPropagation()}
+        @change=${() => this.click()}>
+      </uui-checkbox>
+    `;
+  }
+
   protected render() {
     return html`<slot id="open-part"></slot>
       <div id="select-border"></div>`;
@@ -236,6 +251,21 @@ export class UUICardElement extends SelectOnlyMixin(
         background: var(--uui-color-disabled);
         color: var(--uui-color-disabled-contrast);
       }
+
+      #select-checkbox {
+        position: absolute;
+        top: var(--uui-size-4);
+        left: var(--uui-size-4);
+        opacity: 0;
+        transition: opacity 120ms;
+        z-index: 3;
+      }
+      :host(:focus) #select-checkbox,
+      :host(:focus-within) #select-checkbox,
+      :host(:hover) #select-checkbox,
+      #select-checkbox[checked] {
+        opacity: 1;
+      }
     `,
   ];
 }

packages/uui-card/package.json

@@ -30,7 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.14.1"
+    "@umbraco-ui/uui-base": "1.14.1",
+    "@umbraco-ui/uui-checkbox": "1.14.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",

packages/uui-card/tsconfig.json

@@ -12,6 +12,9 @@
   "references": [
     {
       "path": "../uui-base"
+    },
+    {
+      "path": "../uui-checkbox"
     }
   ]
 }