Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/mr-tabs/mr-tabs.js b/static_src/elements/framework/mr-tabs/mr-tabs.js
new file mode 100644
index 0000000..d14688e
--- /dev/null
+++ b/static_src/elements/framework/mr-tabs/mr-tabs.js
@@ -0,0 +1,99 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+import 'shared/typedef.js';
+
+/**
+ * `<mr-tabs>`
+ *
+ * A Material Design tabs strip. https://material.io/components/tabs/
+ *
+ */
+export class MrTabs extends LitElement {
+ /** @override */
+ static get styles() {
+ return css`
+ ul {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+ li {
+ color: var(--chops-choice-color);
+ }
+ li.selected {
+ color: var(--chops-active-choice-color);
+ }
+ li:hover {
+ background: var(--chops-primary-accent-bg);
+ color: var(--chops-active-choice-color);
+ }
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ display: inline-block;
+ line-height: 38px;
+ padding: 0 24px;
+ }
+ li.selected a {
+ border-bottom: solid 2px;
+ }
+ i.material-icons {
+ vertical-align: middle;
+ margin-right: 4px;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <ul>
+ ${this.items.map(this._renderTab.bind(this))}
+ </ul>
+ `;
+ }
+
+ /**
+ * Renders one tab.
+ * @param {MenuItem} item
+ * @param {number} index
+ * @return {TemplateResult}
+ */
+ _renderTab(item, index) {
+ return html`
+ <li class=${index === this.selected ? 'selected' : ''}>
+ <a href=${item.url}>
+ <i class="material-icons" ?hidden=${!item.icon}>
+ ${item.icon}
+ </i>
+ ${item.text}
+ </a>
+ </li>
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ items: {type: Array},
+ selected: {type: Number},
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+
+ /** @type {Array<MenuItem>} */
+ this.items = [];
+ this.selected = 0;
+ }
+}
+
+customElements.define('mr-tabs', MrTabs);