feat(button): add remaining link variants

PiperOrigin-RevId: 403488252

Author: allan-chen

components/button/elevated-link-button.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {styles as elevationOverlayStyles} from '../elevation/lib/elevation-overlay-styles.css';
+
+import {ElevatedLinkButton} from './lib/elevated-link-button';
+import {styles as elevatedStyles} from './lib/elevated-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-elevated-link-button': MdElevatedLinkButton;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-elevated-link-button')
+export class MdElevatedLinkButton extends ElevatedLinkButton {
+  static override styles =
+      [elevationOverlayStyles, sharedStyles, elevatedStyles];
+}

components/button/lib/elevated-link-button.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, TemplateResult} from 'lit';
+import {ClassInfo} from 'lit/directives/class-map';
+
+import {LinkButton} from './link-button';
+
+/** @soyCompatible */
+export class ElevatedLinkButton extends LinkButton {
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'md3-button--elevated': true,
+    };
+  }
+
+  /** @soyTemplate */
+  protected override renderOverlay(): TemplateResult {
+    return html`<div class="md3-elevation-overlay"></div>`;
+  }
+}

components/button/lib/outlined-link-button.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, TemplateResult} from 'lit';
+import {ClassInfo} from 'lit/directives/class-map';
+
+import {LinkButton} from './link-button';
+
+/** @soyCompatible */
+export class OutlinedLinkButton extends LinkButton {
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'md3-button--outlined': true,
+    };
+  }
+
+  /** @soyTemplate */
+  protected override renderOutline(): TemplateResult {
+    return html`<span class="md3-button__outline"></span>`;
+  }
+}

components/button/lib/text-link-button.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ClassInfo} from 'lit/directives/class-map';
+
+import {LinkButton} from './link-button';
+
+/** @soyCompatible */
+export class TextLinkButton extends LinkButton {
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'md3-button--text': true,
+    };
+  }
+}

components/button/lib/tonal-link-button.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ClassInfo} from 'lit/directives/class-map';
+
+import {LinkButton} from './link-button';
+
+/** @soyCompatible */
+export class TonalLinkButton extends LinkButton {
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'md3-button--tonal': true,
+    };
+  }
+}

components/button/outlined-link-button.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {OutlinedLinkButton} from './lib/outlined-link-button';
+import {styles as outlinedStyles} from './lib/outlined-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-outlined-link-button': MdOutlinedLinkButton;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-outlined-link-button')
+export class MdOutlinedLinkButton extends OutlinedLinkButton {
+  static override styles = [sharedStyles, outlinedStyles];
+}

components/button/text-link-button.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {styles as sharedStyles} from './lib/shared-styles.css';
+import {TextLinkButton} from './lib/text-link-button';
+import {styles as textStyles} from './lib/text-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-text-link-button': MdTextLinkButton;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-text-link-button')
+export class MdTextLinkButton extends TextLinkButton {
+  static override styles = [sharedStyles, textStyles];
+}

components/button/tonal-link-button.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {styles as sharedStyles} from './lib/shared-styles.css';
+import {TonalLinkButton} from './lib/tonal-link-button';
+import {styles as tonalStyles} from './lib/tonal-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-tonal-link-button': MdTonalLinkButton;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-tonal-link-button')
+export class MdTonalLinkButton extends TonalLinkButton {
+  static override styles = [sharedStyles, tonalStyles];
+}