@keditor/components/card/card.js

A library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Contentful

import { LitElement, html } from "lit-element/lit-element.js";
import get from "lodash/get";
import {getEntryData, getAssetForId} from '../helper.js'

export class Card extends LitElement {

  /**
   * HTMLElement spec
   */
  constructor() {
    super();
    this.id = 'Somebody';
    this.accessToken = 'accessToken';
    this.space = 'space';
    this.environment = 'environment';
    this.content = "";
  }

  /**
   * LitElement properties definition
   */
  static get properties() {
    return {
      id: {type: String},
      accessToken: {type: String},
      space: {type: String},
      environment: {type: String},
      description: { type: String },
      heading: { type: String },
      image: { type: Array }
    }
  }

  async firstUpdated() {
    const entryData = await getEntryData(this.id, this.accessToken, this.space, this.environment);
    this.description = get(entryData, "description.content[0].content[0].value")
    this.heading = get(entryData, "heading")
    this.imgId = get(entryData, "image.sys.id")
    this.image = await getAssetForId(this.imgId, this.accessToken, this.space, this.environment);
  }
  
  updated() {
    
  }

  /**
   * Popular convention / LitElement
   */
  render() {
    return html`
      <section class="card-component">
      <div class="card-image">
        <img src="${this.image}" alt="img"/>
      </div>
      <h2 class="section-title" >${this.heading}</h2>
      <p class="card-desc">${this.description}</p>
    </section>
    `;
  }
}