chore(card): add basic demo page

PiperOrigin-RevId: 576657778

Author: asyncLiz

labs/card/demo/demo.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './material-collection.js';
+import './index.js';
+
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+
+import {stories, StoryKnobs} from './stories.js';
+
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Cards',
+  [],
+);
+
+collection.addStories(...materialInitsToStoryInits(stories));
+
+setUpDemo(collection);

labs/card/demo/project.json

@@ -0,0 +1,9 @@
+{
+  "extends": "/assets/stories/base.json",
+  "files": {
+    "demo.ts": {
+      "hidden": true
+    },
+    "stories.ts": {}
+  }
+}

labs/card/demo/stories.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '@material/web/labs/card/elevated-card.js';
+import '@material/web/labs/card/filled-card.js';
+import '@material/web/labs/card/outlined-card.js';
+
+import {MaterialStoryInit} from './material-collection.js';
+import {css, html} from 'lit';
+
+/** Knob types for card stories. */
+export interface StoryKnobs {}
+
+const cards: MaterialStoryInit<StoryKnobs> = {
+  name: 'Cards',
+  styles: css`
+    .container {
+      color: var(--md-sys-color-on-surface);
+      display: flex;
+      font: var(--md-sys-typescale-body-medium-weight, 400)
+        var(--md-sys-typescale-body-medium-size, 0.875rem) /
+        var(--md-sys-typescale-body-medium-line-height, 1.25rem)
+        var(--md-sys-typescale-body-medium-font, 'Roboto');
+      gap: 8px;
+    }
+  `,
+  render() {
+    return html`
+      <div class="container">
+        <md-elevated-card>An elevated card</md-elevated-card>
+
+        <md-filled-card>A filled card</md-filled-card>
+
+        <md-outlined-card>An outlined card</md-outlined-card>
+      </div>
+    `;
+  },
+};
+
+/** Card stories. */
+export const stories = [cards];