"uui-card-content-node": adds renderCheckbox()

Author: leekelleher

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