Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/mr-site-banner/mr-site-banner.js b/static_src/elements/framework/mr-site-banner/mr-site-banner.js
new file mode 100644
index 0000000..2a98a5c
--- /dev/null
+++ b/static_src/elements/framework/mr-site-banner/mr-site-banner.js
@@ -0,0 +1,75 @@
+// Copyright 2019 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 'elements/chops/chops-timestamp/chops-timestamp.js';
+import {connectStore} from 'reducers/base.js';
+import * as sitewide from 'reducers/sitewide.js';
+
+export class MrSiteBanner extends connectStore(LitElement) {
+ /** @override */
+ static get styles() {
+ return css`
+ :host([hidden]) {
+ display: none;
+ }
+ :host {
+ display: block;
+ font-weight: bold;
+ color: var(--chops-field-error-color);
+ background: var(--chops-orange-50);
+ padding: 5px;
+ text-align: center;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ ${this.bannerMessage}
+ ${this.bannerTime ? html`
+ <chops-timestamp
+ .timestamp=${this.bannerTime}
+ ></chops-timestamp>
+ ` : ''}
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ hidden: {
+ type: Boolean,
+ reflect: true,
+ },
+ bannerMessage: {type: String},
+ bannerTime: {type: Number},
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+ this.bannerMessage = '';
+ this.bannerTime = 0;
+ this.hidden = false;
+ }
+
+ /** @override */
+ stateChanged(state) {
+ this.bannerMessage = sitewide.bannerMessage(state);
+ this.bannerTime = sitewide.bannerTime(state);
+ }
+
+ /** @override */
+ updated(changedProperties) {
+ if (changedProperties.has('bannerMessage')) {
+ this.hidden = !this.bannerMessage;
+ }
+ }
+}
+
+customElements.define('mr-site-banner', MrSiteBanner);
diff --git a/static_src/elements/framework/mr-site-banner/mr-site-banner.test.js b/static_src/elements/framework/mr-site-banner/mr-site-banner.test.js
new file mode 100644
index 0000000..527b942
--- /dev/null
+++ b/static_src/elements/framework/mr-site-banner/mr-site-banner.test.js
@@ -0,0 +1,56 @@
+// Copyright 2019 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 {assert} from 'chai';
+import {FORMATTER}
+ from 'elements/chops/chops-timestamp/chops-timestamp-helpers.js';
+import {MrSiteBanner} from './mr-site-banner.js';
+
+
+let element;
+
+describe('mr-site-banner', () => {
+ beforeEach(() => {
+ element = document.createElement('mr-site-banner');
+ document.body.appendChild(element);
+ });
+
+ afterEach(() => {
+ document.body.removeChild(element);
+ });
+
+ it('initializes', () => {
+ assert.instanceOf(element, MrSiteBanner);
+ });
+
+ it('displays a banner message', async () => {
+ element.bannerMessage = 'Message';
+ await element.updateComplete;
+ assert.equal(element.shadowRoot.textContent.trim(), 'Message');
+ assert.isNull(element.shadowRoot.querySelector('chops-timestamp'));
+ });
+
+ it('displays the banner timestamp', async () => {
+ const timestamp = 1560450600;
+
+ element.bannerMessage = 'Message';
+ element.bannerTime = timestamp;
+ await element.updateComplete;
+
+ const chopsTimestamp = element.shadowRoot.querySelector('chops-timestamp');
+
+ // The formatted date strings differ based on time zone and browser, so we
+ // can't use static strings for testing. We can't stub out the format method
+ // because it's native code and can't be modified. So just use the FORMATTER
+ // object.
+ assert.include(
+ chopsTimestamp.shadowRoot.textContent,
+ FORMATTER.format(new Date(timestamp * 1000)));
+ });
+
+ it('hides when there is no banner message', async () => {
+ await element.updateComplete;
+ assert.isTrue(element.hidden);
+ });
+});