Adds renderCheckbox() method to "uui-card" component

Author: leekelleher

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;
+      }
     `,
   ];
 }