default slot + story (#568)

Author: nielslyngsoe

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

@@ -3,7 +3,7 @@ import {
   SelectOnlyMixin,
 } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { css, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { UUICardEvent } from './UUICardEvent';
@@ -12,6 +12,7 @@ import { UUICardEvent } from './UUICardEvent';
  *  @element uui-card
  *  @fires {UUICardEvent} open - fires when the card title is clicked.
  *  @description - Base card component to be extended by specific card elements.
+ *  @slot - Default content.
  */
 @defineElement('uui-card')
 export class UUICardElement extends SelectOnlyMixin(
@@ -158,6 +159,10 @@ export class UUICardElement extends SelectOnlyMixin(
     e.stopPropagation();
     this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
   }
+
+  protected render() {
+    return html`<slot></slot>`;
+  }
 }
 
 declare global {

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

@@ -18,6 +18,10 @@ const Template: Story = () => html`
     Card is a Component that provides the basics for a Card component. This can
     be extended in code to match a certain need.
   </p>
+
+  <uui-card selectable>
+    <h5 class="uui-h5">Context of the card<h5>
+  </uui-card>
 `;
 
 export const AAAOverview = Template.bind({});