Convert HeroBlock to LitElement

package.json

@@ -50,6 +50,7 @@
     "@polymer/paper-tabs": "^3.1.0",
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/polymer": "^3.4.1",
+    "@power-elements/lazy-image": "^2.2.0",
     "@radi-cho/star-rating": "github:abraham/star-rating#polymer-3",
     "@webcomponents/webcomponentsjs": "^2.4.3",
     "clamp-js-main": "github:abraham/clamp-js-main#export",

src/components/hero-block.test.ts

@@ -0,0 +1,99 @@
+import { getByText } from '@testing-library/dom';
+import { html } from 'lit-html';
+import { mocked } from 'ts-jest/utils';
+import { fixture } from '../../__tests__/helpers/fixtures';
+import { uiActions } from '../redux/actions';
+import './hero-block';
+
+jest.mock('../redux/actions');
+
+type HeroBlock = import('./hero-block').HeroBlock;
+const setHeroSettings = mocked(uiActions.setHeroSettings);
+
+describe('hero-block', () => {
+  beforeEach(() => {
+    setHeroSettings.mockClear();
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get('hero-block')).toBeDefined();
+  });
+
+  it('has default values', async () => {
+    const { element, shadowRoot } = await fixture<HeroBlock>(html`<hero-block></hero-block>`);
+    expect(element.active).toStrictEqual(false);
+    expect(element.backgroundImage).toStrictEqual('');
+    expect(element.backgroundColor).toStrictEqual('#fff');
+    expect(element.fontColor).toStrictEqual('#000');
+    expect(element.hideLogo).toStrictEqual(false);
+    expect(shadowRoot.querySelector<HTMLDivElement>('.hero-overlay')).not.toHaveAttribute('show');
+    expect(shadowRoot.querySelector<HTMLDivElement>('.hero-image')).toBeNull();
+  });
+
+  it('accepts values', async () => {
+    const { element, shadowRoot } = await fixture<HeroBlock>(
+      html`
+        <hero-block
+          active
+          background-image="/example.jpg"
+          background-color="#000"
+          font-color="#fff"
+          hide-logo
+        ></hero-block>
+      `
+    );
+    expect(element.active).toStrictEqual(true);
+    expect(element.backgroundImage).toStrictEqual('/example.jpg');
+    expect(element.backgroundColor).toStrictEqual('#000');
+    expect(element.fontColor).toStrictEqual('#fff');
+    expect(element.hideLogo).toStrictEqual(true);
+    expect(shadowRoot.querySelector<HTMLDivElement>('.hero-overlay')).toHaveAttribute('show');
+    expect(shadowRoot.querySelector<HTMLDivElement>('.hero-image')).not.toBeNull();
+  });
+
+  it('displays slot elements', async () => {
+    const { element, shadowRoot } = await fixture<HeroBlock>(
+      html`
+        <hero-block>
+          <p>default slot</p>
+          <p slot="bottom">bottom slot</p>
+        </hero-block>
+      `
+    );
+    const slots = shadowRoot.querySelectorAll('slot');
+    expect(slots).toHaveLength(2);
+    expect(getByText(element, 'default slot')).toBeVisible();
+    expect(slots[0]).not.toHaveAttribute('name');
+    expect(slots[0].assignedElements()[0]).toHaveTextContent('default slot');
+    expect(getByText(element, 'bottom slot')).toBeVisible();
+    expect(slots[1]).toHaveAttribute('name', 'bottom');
+    expect(slots[1].assignedElements()[0]).toHaveTextContent('bottom slot');
+  });
+
+  it('renders an image', async () => {
+    const { shadowRoot } = await fixture<HeroBlock>(
+      html`<hero-block background-image="/example.jpg"></hero-block>`
+    );
+    expect(shadowRoot.querySelector('.hero-image')).toHaveAttribute('src', '/example.jpg');
+  });
+
+  describe('setHeroSettings', () => {
+    it('notifies when active', async () => {
+      await fixture<HeroBlock>(
+        html`<hero-block active background-image="/example.jpg"></hero-block>`
+      );
+      expect(setHeroSettings).toHaveBeenCalledTimes(1);
+      expect(setHeroSettings).toHaveBeenCalledWith({
+        backgroundColor: '#fff',
+        backgroundImage: '/example.jpg',
+        fontColor: '#000',
+        hideLogo: false,
+      });
+    });
+
+    it('does not notify when inactive', async () => {
+      await fixture<HeroBlock>(html`<hero-block background-image="/example.jpg"></hero-block>`);
+      expect(setHeroSettings).not.toHaveBeenCalled();
+    });
+  });
+});

src/components/hero-block.ts

@@ -0,0 +1,139 @@
+import '@power-elements/lazy-image';
+import { css, customElement, html, property } from 'lit-element';
+import { styleMap } from 'lit-html/directives/style-map';
+import { uiActions } from '../redux/actions';
+import { ThemedElement } from './themed-element';
+
+@customElement('hero-block')
+export class HeroBlock extends ThemedElement {
+  @property({ type: Boolean })
+  active = false;
+  @property({ type: String, attribute: 'background-image' })
+  backgroundImage = '';
+  @property({ type: String, attribute: 'background-color' })
+  backgroundColor = '#fff';
+  @property({ type: String, attribute: 'font-color' })
+  fontColor = '#000';
+  @property({ type: Boolean, attribute: 'hide-logo' })
+  hideLogo = false;
+
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        :host {
+          margin-top: -56px;
+          border-bottom: 1px solid var(--divider-color);
+        }
+
+        .hero-block {
+          height: 100%;
+          position: relative;
+          color: inherit;
+        }
+
+        .hero-overlay {
+          background-color: rgba(0, 0, 0, 0.6);
+          opacity: 0;
+          transition: opacity 0.3s;
+          position: absolute;
+        }
+
+        .hero-overlay[show] {
+          opacity: 1;
+        }
+
+        .hero-image {
+          transition: background-color 0.3s;
+          position: absolute;
+          --lazy-image-fit: cover;
+        }
+
+        .content {
+          padding: 0;
+          width: 100%;
+          height: unset;
+          z-index: 0;
+          position: unset;
+        }
+
+        .hero-content {
+          padding: 80px 32px 32px;
+          position: unset;
+        }
+
+        div ::slotted(.hero-title) {
+          margin: 30px 0;
+          font-size: 40px;
+        }
+
+        div ::slotted(.hero-description) {
+          margin-bottom: 30px;
+          max-width: 600px;
+        }
+
+        @media (min-width: 812px) {
+          :host {
+            margin-top: -64px;
+          }
+
+          .hero-content {
+            padding-top: 120px;
+            padding-bottom: 60px;
+          }
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div
+        class="hero-block container"
+        style="${styleMap({ color: this.fontColor })}"
+        layout
+        start
+        vertical
+        center-justified
+      >
+        ${this.backgroundImage && this.image}
+        <div class="hero-overlay" ?show="${!!this.backgroundImage}" fit></div>
+        <div class="content">
+          <div class="hero-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <slot name="bottom"></slot>
+    `;
+  }
+
+  private get image() {
+    return html`
+      <lazy-image
+        class="hero-image"
+        src="${this.backgroundImage}"
+        style="${styleMap({ backgroundColor: this.backgroundColor })}"
+        fit
+      ></lazy-image>
+    `;
+  }
+
+  updated(changedProperties: import('lit-element').PropertyValues) {
+    super.updated(changedProperties);
+    if (this.active) {
+      uiActions.setHeroSettings({
+        backgroundImage: this.backgroundImage,
+        backgroundColor: this.backgroundColor,
+        fontColor: this.fontColor,
+        hideLogo: this.hideLogo,
+      });
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'hero-block': HeroBlock;
+  }
+}