From dcfd35a7a3d1ce345e600b1cbc782fb70d1c1bf8 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 25 Oct 2023 14:30:41 -0700 Subject: [PATCH] chore(card): add boilerplate files PiperOrigin-RevId: 576646068 --- labs/card/elevated-card.ts | 26 +++++++++++++++++++++++++ labs/card/filled-card.ts | 26 +++++++++++++++++++++++++ labs/card/internal/_elevated-card.scss | 14 +++++++++++++ labs/card/internal/_filled-card.scss | 14 +++++++++++++ labs/card/internal/_outlined-card.scss | 14 +++++++++++++ labs/card/internal/_shared.scss | 10 ++++++++++ labs/card/internal/card.ts | 16 +++++++++++++++ labs/card/internal/elevated-styles.scss | 10 ++++++++++ labs/card/internal/filled-styles.scss | 10 ++++++++++ labs/card/internal/outlined-styles.scss | 10 ++++++++++ labs/card/internal/shared-styles.scss | 10 ++++++++++ labs/card/outlined-card.ts | 26 +++++++++++++++++++++++++ 12 files changed, 186 insertions(+) create mode 100644 labs/card/elevated-card.ts create mode 100644 labs/card/filled-card.ts create mode 100644 labs/card/internal/_elevated-card.scss create mode 100644 labs/card/internal/_filled-card.scss create mode 100644 labs/card/internal/_outlined-card.scss create mode 100644 labs/card/internal/_shared.scss create mode 100644 labs/card/internal/card.ts create mode 100644 labs/card/internal/elevated-styles.scss create mode 100644 labs/card/internal/filled-styles.scss create mode 100644 labs/card/internal/outlined-styles.scss create mode 100644 labs/card/internal/shared-styles.scss create mode 100644 labs/card/outlined-card.ts diff --git a/labs/card/elevated-card.ts b/labs/card/elevated-card.ts new file mode 100644 index 0000000000..9955133c67 --- /dev/null +++ b/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]; +} diff --git a/labs/card/filled-card.ts b/labs/card/filled-card.ts new file mode 100644 index 0000000000..c2ecd169ba --- /dev/null +++ b/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]; +} diff --git a/labs/card/internal/_elevated-card.scss b/labs/card/internal/_elevated-card.scss new file mode 100644 index 0000000000..628529d7d6 --- /dev/null +++ b/labs/card/internal/_elevated-card.scss @@ -0,0 +1,14 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use '../../../tokens'; +// go/keep-sorted end + +@mixin styles() { + $tokens: tokens.md-comp-elevated-card-values(); + + // TODO(b/261201808): add styles +} diff --git a/labs/card/internal/_filled-card.scss b/labs/card/internal/_filled-card.scss new file mode 100644 index 0000000000..8a08307ef9 --- /dev/null +++ b/labs/card/internal/_filled-card.scss @@ -0,0 +1,14 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use '../../../tokens'; +// go/keep-sorted end + +@mixin styles() { + $tokens: tokens.md-comp-filled-card-values(); + + // TODO(b/261201808): add styles +} diff --git a/labs/card/internal/_outlined-card.scss b/labs/card/internal/_outlined-card.scss new file mode 100644 index 0000000000..14e6432d99 --- /dev/null +++ b/labs/card/internal/_outlined-card.scss @@ -0,0 +1,14 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use '../../../tokens'; +// go/keep-sorted end + +@mixin styles() { + $tokens: tokens.md-comp-outlined-card-values(); + + // TODO(b/261201808): add styles +} diff --git a/labs/card/internal/_shared.scss b/labs/card/internal/_shared.scss new file mode 100644 index 0000000000..d353432f83 --- /dev/null +++ b/labs/card/internal/_shared.scss @@ -0,0 +1,10 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +@mixin styles() { + :host { + display: flex; + } +} diff --git a/labs/card/internal/card.ts b/labs/card/internal/card.ts new file mode 100644 index 0000000000..e13d16a01a --- /dev/null +++ b/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``; + } +} diff --git a/labs/card/internal/elevated-styles.scss b/labs/card/internal/elevated-styles.scss new file mode 100644 index 0000000000..96fc083c75 --- /dev/null +++ b/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; diff --git a/labs/card/internal/filled-styles.scss b/labs/card/internal/filled-styles.scss new file mode 100644 index 0000000000..766d1732ce --- /dev/null +++ b/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; diff --git a/labs/card/internal/outlined-styles.scss b/labs/card/internal/outlined-styles.scss new file mode 100644 index 0000000000..6a7f265423 --- /dev/null +++ b/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; diff --git a/labs/card/internal/shared-styles.scss b/labs/card/internal/shared-styles.scss new file mode 100644 index 0000000000..b7d8005fd2 --- /dev/null +++ b/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; diff --git a/labs/card/outlined-card.ts b/labs/card/outlined-card.ts new file mode 100644 index 0000000000..a8a993b0c2 --- /dev/null +++ b/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]; +}