uui card

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

@@ -9,6 +9,7 @@ import { property } from 'lit/decorators.js';
 import { UUICardEvent } from './UUICardEvent';
 
 /**
+ *  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
  *  @fires {UUICardEvent} open - fires when the card title is clicked.
  *  @description - Base card component to be extended by specific card elements.

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

@@ -7,23 +7,39 @@ const meta: Meta = {
   id: 'uui-card',
   component: 'uui-card',
   title: 'Displays/Cards/Card',
+  args: {
+    slot: 'This is an example of a simple card',
+  },
+  render: args => html` <uui-card ${spread(args)}>${args.slot}</uui-card> `,
+  decorators: [
+    (Story: any) =>
+      html`<div
+        style="display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(200px, 300px));">
+        ${Story()}
+      </div>`,
+  ],
 };
 
 export default meta;
 type Story = StoryObj;
 
-/**
- * Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.
- */
-export const Default: Story = {
-  render: args => html`
-    <uui-card ${spread(args)}>
-      <div>
-        <p>
-          This is an example of a simple card. It can be used to display
-          information in a structured way.
-        </p>
-      </div>
-    </uui-card>
-  `,
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    error: true,
+  },
+};
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
 };