fstbraz

{
  "name": "inclusive-web-components",
  "version": "0.0.14",
  "description": "Inclusive UI elements library based on web components",
  "files": [
    "lib/**/*"
  ],
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "scripts": {

fstbraz

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

@customElement('card-image')
export class Card extends LitElement {}

fstbraz

...
export interface CardConfig {
  altText: string;
  ctaText: string;
  image: string;
  link: string;
  text: string;
  textDesc: string;
  textDescLink: string;
  title: string;

fstbraz

...
@customElement('card-image')
export class Card extends LitElement {
    @property({ type: Object }) card!: CardConfig;
    render() {
        return html`
          <li class="card">
            <div class="img">
                <img src="${this.card.image}" alt="${this.card.altText}" />
            </div>

fstbraz

...
import { sharedStyles } from './shared/style';

const componentStyle = css`
  h2 {
    margin-bottom: 1rem;
  }
  .card + .card {
    margin-top: 1.5rem;
  }

fstbraz

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

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

...

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

...

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 { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

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