Run Prettier

netgen-layouts · Sep 27, 2022 · e37c938 · e37c938
1 parent 50156ce
commit e37c938
Show file tree

Hide file tree

Showing 15 changed files with 260 additions and 166 deletions.
diff --git a/components/avatar/element.js b/components/avatar/element.js
@@ -1,71 +1,69 @@
-import { LitElement, html } from 'lit';
-import { colorFromString } from './lib/color_from_string.js';
+import {LitElement, html} from 'lit';
+import {colorFromString} from './lib/color_from_string.js';
 import style from './style.js';
 
 export default class Avatar extends LitElement {
   static styles = [style];
 
   static properties = {
-    name: { type: String },
-    picture: { type: String },
-    icon: { type: String },
-    label: { type: String },
-    rounded: { type: Boolean },
-    layout: { type: String, reflect: true },
+    name: {type: String},
+    picture: {type: String},
+    icon: {type: String},
+    label: {type: String},
+    rounded: {type: Boolean},
+    layout: {type: String, reflect: true},
   };
 
   constructor() {
     super();
-    this.icon = "user";
-    this.layout = "md";
+    this.icon = 'user';
+    this.layout = 'md';
   }
 
   get bgColor() {
     return colorFromString(this.name, 50, 52);
   }
 
   get initials() {
-    return this.name.split(/\s+/).map(part => part[0]).slice(0, 2).join('');
+    return this.name
+      .split(/\s+/)
+      .map((part) => part[0])
+      .slice(0, 2)
+      .join('');
   }
 
   renderPicture() {
-    return html`
-      <img src="${this.picture}" />
-    `;
+    return html` <img src="${this.picture}" /> `;
   }
 
   renderPlaceholder() {
-    return html`
-      <bu-icon name="${this.icon}"></bu-icon>
-    `;
+    return html` <bu-icon name="${this.icon}"></bu-icon> `;
   }
 
   renderInitials() {
     return html`
-      <span class="name" style="background-color: ${this.bgColor}">${this.initials}</span>
+      <span class="name" style="background-color: ${this.bgColor}"
+        >${this.initials}</span
+      >
     `;
   }
 
   renderLabel() {
-    return html`
-      <span class="label">${this.label}</span>
-    `;
+    return html` <span class="label">${this.label}</span> `;
   }
 
   renderContent() {
     if (this.picture) {
       return this.renderPicture();
-    } if (this.name) {
+    }
+    if (this.name) {
       return this.renderInitials();
     }
     return this.renderPlaceholder();
   }
 
   render() {
-    return html`
-      ${this.renderContent()}
-      ${this.label && this.renderLabel()}
-    `;
+    return html` ${this.renderContent()} ${this.label && this.renderLabel()} `;
   }
 }
 

diff --git a/components/avatar/spec.js b/components/avatar/spec.js
@@ -6,24 +6,40 @@ describe('bu-avatar', () => {
   it('renders with placeholder', async () => {
     const element = await fixture(html`<bu-avatar></bu-avatar>`);
 
-    assert.shadowDom.equal(element, `
+    assert.shadowDom.equal(
+      element,
+      `
       <bu-icon name="user"></bu-icon>
-    `);
+    `
+    );
   });
 
   it('renders with initials and background color', async () => {
-    const element = await fixture(html`<bu-avatar name="John Doe"></bu-avatar>`);
+    const element = await fixture(
+      html`<bu-avatar name="John Doe"></bu-avatar>`
+    );
 
-    assert.shadowDom.equal(element, `
+    assert.shadowDom.equal(
+      element,
+      `
       <span class="name" style="background-color: hsl(-147, 50%, 52%)">JD</span>
-    `);
+    `
+    );
   });
 
   it('renders with picture', async () => {
-    const element = await fixture(html`<bu-avatar name="John Doe" picture="https://i.pravatar.cc/120"></bu-avatar>`);
+    const element = await fixture(
+      html`<bu-avatar
+        name="John Doe"
+        picture="https://i.pravatar.cc/120"
+      ></bu-avatar>`
+    );
 
-    assert.shadowDom.equal(element, `
+    assert.shadowDom.equal(
+      element,
+      `
       <img src="https://i.pravatar.cc/120">
-    `);
+    `
+    );
   });
 });
diff --git a/components/avatar/style.js b/components/avatar/style.js
@@ -56,13 +56,13 @@ export default css`
     border-radius: 50%;
   }
 
-  :host([layout=md]) {
+  :host([layout='md']) {
     width: var(--avatar-size, var(--md));
     height: var(--avatar-size, var(--md));
     font-size: calc(var(--avatar-size, var(--md)) * 0.4);
   }
 
-  :host([layout=lg]) {
+  :host([layout='lg']) {
     width: var(--avatar-size, var(--lg));
     height: var(--avatar-size, var(--lg));
     font-size: calc(var(--avatar-size, var(--lg)) * 0.4);

diff --git a/components/badge/element.js b/components/badge/element.js
@@ -5,14 +5,14 @@ export default class Badge extends LitElement {
   static styles = [style];
 
   static properties = {
-    count: { type: Number, reflect: true },
-    theme: { type: String, reflect: true },
-    showZero: { type: Boolean },
+    count: {type: Number, reflect: true},
+    theme: {type: String, reflect: true},
+    showZero: {type: Boolean},
   };
 
   constructor() {
     super();
-    this.theme = "secondary";
+    this.theme = 'secondary';
   }
 
   render() {

diff --git a/components/badge/spec.js b/components/badge/spec.js
@@ -11,22 +11,27 @@ describe('bu-badge', () => {
   it('default render', async () => {
     const element = await fixture(html`<bu-badge count="1"></bu-badge>`);
 
-    assert.dom.equal(element, `
+    assert.dom.equal(
+      element,
+      `
       <bu-badge count=1 theme="secondary"></bu-badge>
-    `);
+    `
+    );
   });
 
   it('hidden if count is 0', async () => {
     const element = await fixture(html`<bu-badge count="0"></bu-badge>`);
 
-    assert.shadowDom.equal(element, "");
+    assert.shadowDom.equal(element, '');
     assert.equal(getComputedStyle(element).display, 'none');
   });
 
   it('visible if count is 0 and showZero set to true', async () => {
-    const element = await fixture(html`<bu-badge count="0" showZero></bu-badge>`);
+    const element = await fixture(
+      html`<bu-badge count="0" showZero></bu-badge>`
+    );
 
-    assert.shadowDom.equal(element, "0");
+    assert.shadowDom.equal(element, '0');
     assert.equal(getComputedStyle(element).display, 'inline-flex');
   });
 });
diff --git a/components/badge/style.js b/components/badge/style.js
@@ -20,11 +20,11 @@ export default css`
     border-radius: 10px;
   }
 
-  :host([theme=primary]) {
+  :host([theme='primary']) {
     background-color: var(--primary, rgb(13, 110, 253));
   }
 
-  :host([theme=secondary]) {
+  :host([theme='secondary']) {
     background-color: var(--secondary, rgb(50, 157, 125));
   }
 
@@ -36,4 +36,4 @@ export default css`
   :host([showZero][count='0']) {
     display: inline-flex;
   }
-`
+`;
diff --git a/components/block/element.js b/components/block/element.js
@@ -9,10 +9,10 @@ export default class Block extends LitElement {
   static styles = [style];
 
   static properties = {
-    blockId: { type: Number},
+    blockId: {type: Number},
   };
 
-  renderMenu(){
+  renderMenu() {
     return html`
       <nav>
         <button @click=${this.edit}>Edit</button>
@@ -23,41 +23,44 @@ export default class Block extends LitElement {
     `;
   }
 
-  edit(e){
-    console.log(e.target.innerText)
+  edit(e) {
+    console.log(e.target.innerText);
     this.refresh();
   }
 
   delete(e) {
-    console.log(e.target.innerText)
+    console.log(e.target.innerText);
     this.remove();
   }
 
   moveUp(e) {
-    console.log(e.target.innerText)
+    console.log(e.target.innerText);
     const prevElement = this.previousElementSibling;
-    isBlock(prevElement) && this.parentNode.insertBefore(this, prevElement)
+    isBlock(prevElement) && this.parentNode.insertBefore(this, prevElement);
   }
 
   moveDown(e) {
-    console.log(e.target.innerText)
+    console.log(e.target.innerText);
     const nextElement = this.nextElementSibling;
-    isBlock(nextElement) && this.parentNode.insertBefore(nextElement, this)
+    isBlock(nextElement) && this.parentNode.insertBefore(nextElement, this);
   }
 
   async fetch() {
-    const resp = await fetch(window.location.href)
-    return resp.text()
+    const resp = await fetch(window.location.href);
+    return resp.text();
   }
 
   async refresh() {
     let html = await this.fetch();
-    const template = document.createElement('template')
+    const template = document.createElement('template');
     template.innerHTML = html;
-    const currentBlockHtml = template.content.querySelector(`ngl-block[blockId="${this.blockId}"]`)
+    const currentBlockHtml = template.content.querySelector(
+      `ngl-block[blockId="${this.blockId}"]`
+    );
 
     // Simulate text change
-    currentBlockHtml.querySelector('.timestamp').innerText = new Date().toLocaleTimeString();
+    currentBlockHtml.querySelector('.timestamp').innerText =
+      new Date().toLocaleTimeString();
     this.innerHTML = currentBlockHtml.innerHTML;
   }
 

diff --git a/components/block/spec.js b/components/block/spec.js
@@ -11,7 +11,9 @@ describe('ngl-block', () => {
   it('default render', async () => {
     const element = await fixture(html`<ngl-block blockId="1"></ngl-block>`);
 
-    assert.shadowDom.equal(element, `
+    assert.shadowDom.equal(
+      element,
+      `
     <main>
       <nav>
         <button>Edit</button>
@@ -21,6 +23,7 @@ describe('ngl-block', () => {
       </nav>
       <slot></slot>
     </main>
-    `);
+    `
+    );
   });
 });