fstbraz

{
  "compilerOptions": {
    ...
    "outDir": "./lib",
    ...
  },
  ...
}

fstbraz

{
  "name": "my-lib",
  "version": "0.0.1",
  "description": "My Lib description",
  "files": [
    "lib/**/*"
  ],
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "scripts": {

fstbraz

...

import { css, html, LitElement } from 'lit';
import { sharedStyles } from './shared/style';

const componentStyle = css`
  .cards > ul {
    list-style: none;
    margin: 0;
    padding: 0;

fstbraz

...

import { html, LitElement } from 'lit';
import { repeat } from 'lit/directives/repeat.js';

@customElement('cards-images')
export class Cards extends LitElement {
    ...
    
    render() {

fstbraz

...

import { customElement, property } from 'lit/decorators.js';

@customElement('cards-images')
export class Cards extends LitElement {

    @property({ type: Array }) cards!: CardConfig[];

}

fstbraz

...

import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('cards-images')
export class Cards extends LitElement {}

fstbraz

...

describe('Card Component', () => {
    ...
        
    it('it renders the image', () => {
      const image = el.shadowRoot?.querySelector('img');
      expect(image).to.exist;
      expect(image?.alt).to.equal(card.altText);
      expect(image?.src).to.equal(card.image);

fstbraz

...

import { assert, expect, fixture, html } from '@open-wc/testing';

describe('Card Component', () => {
    ...
    
    beforeEach(async () => {
        el = await fixture<Card>(html` <card-image .card=${card}></card-image> `);
     });

fstbraz

import { Card } from './card';

describe('Card Component', () => {

    let el: Card;
    
    const card = {
        altText: 'Je suis a image',
        ctaText: 'Click me',
        image: 'http://example.com/image/',

fstbraz

...
@customElement('card-image')
export class Card extends LitElement {
    ...
    @query('#card-link') cardLinkEl!: HTMLAnchorElement;
    
    render() {
      return html`
        <li class="card">
          <div class="img">