chore(card): add basic demo page

PiperOrigin-RevId: 575897647

labs/card/_elevated-card.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/elevated-card' show theme;

labs/card/_filled-card.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/filled-card' show theme;

labs/card/_outlined-card.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/outlined-card' show theme;

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];

labs/card/elevated-card.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {Card} from './internal/card.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
+import {styles as sharedStyles} from './internal/shared-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-elevated-card': MdElevatedCard;
+  }
+}
+
+/**
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-elevated-card')
+export class MdElevatedCard extends Card {
+  static override styles = [sharedStyles, elevatedStyles];
+}

labs/card/filled-card.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {Card} from './internal/card.js';
+import {styles as filledStyles} from './internal/filled-styles.css.js';
+import {styles as sharedStyles} from './internal/shared-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-filled-card': MdFilledCard;
+  }
+}
+
+/**
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-filled-card')
+export class MdFilledCard extends Card {
+  static override styles = [sharedStyles, filledStyles];
+}

labs/card/internal/_elevated-card.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-elevated-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Elevated card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-elevated-card-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-elevated-card-values();
+
+  // TODO(b/261201808): add styles
+}

labs/card/internal/_filled-card.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-filled-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Filled card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-card-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-card-values();
+
+  // TODO(b/261201808): add styles
+}

labs/card/internal/_outlined-card.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-outlined-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Outlined card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-outlined-card-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-card-values();
+
+  // TODO(b/261201808): add styles
+}

labs/card/internal/_shared.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  :host {
+    display: flex;
+  }
+}

labs/card/internal/card.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, LitElement} from 'lit';
+
+/**
+ * A card component.
+ */
+export class Card extends LitElement {
+  protected override render() {
+    return html`<slot></slot>`;
+  }
+}

labs/card/internal/elevated-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './elevated-card';
+// go/keep-sorted end
+
+@include elevated-card.styles;

labs/card/internal/filled-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './filled-card';
+// go/keep-sorted end
+
+@include filled-card.styles;

labs/card/internal/outlined-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './outlined-card';
+// go/keep-sorted end
+
+@include outlined-card.styles;

labs/card/internal/shared-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './shared';
+// go/keep-sorted end
+
+@include shared.styles;

labs/card/outlined-card.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {Card} from './internal/card.js';
+import {styles as outlinedStyles} from './internal/outlined-styles.css.js';
+import {styles as sharedStyles} from './internal/shared-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-outlined-card': MdOutlinedCard;
+  }
+}
+
+/**
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-outlined-card')
+export class MdOutlinedCard extends Card {
+  static override styles = [sharedStyles, outlinedStyles];
+}

tokens/_index.scss

@@ -11,10 +11,12 @@
 @forward './md-comp-dialog' as md-comp-dialog-*;
 @forward './md-comp-divider' as md-comp-divider-*;
 @forward './md-comp-elevated-button' as md-comp-elevated-button-*;
+@forward './md-comp-elevated-card' as md-comp-elevated-card-*;
 @forward './md-comp-elevation' as md-comp-elevation-*;
 @forward './md-comp-fab' as md-comp-fab-*;
 @forward './md-comp-fab-branded' as md-comp-fab-branded-*;
 @forward './md-comp-filled-button' as md-comp-filled-button-*;
+@forward './md-comp-filled-card' as md-comp-filled-card-*;
 @forward './md-comp-filled-field' as md-comp-filled-field-*;
 @forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*;
 @forward './md-comp-filled-select' as md-comp-filled-select-*;
@@ -38,6 +40,7 @@
 @forward './md-comp-navigation-bar' as md-comp-navigation-bar-*;
 @forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*;
 @forward './md-comp-outlined-button' as md-comp-outlined-button-*;
+@forward './md-comp-outlined-card' as md-comp-outlined-card-*;
 @forward './md-comp-outlined-field' as md-comp-outlined-field-*;
 @forward './md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*;
 @forward './md-comp-outlined-segmented-button' as