add correct tab spacing to the files (part 2 - leftover)

I forgot to do the indentation of these following files:
    - helmholtz-marketplace-app.js
    - helmholtz-marketplace-app.test.js

Also, the `prettier` is configured to use 4 spacing as
the default indentation.

Pull-request: #6

package-lock.json

@@ -1322,16 +1322,6 @@
                 }
             }
         },
-        "@open-wc/prettier-config": {
-            "version": "0.1.14",
-            "resolved": "https://registry.npmjs.org/@open-wc/prettier-config/-/prettier-config-0.1.14.tgz",
-            "integrity": "sha512-b30hqVLZLOvtGR0p3cmSvEYnu+OeKA1N/3v8m2u1bRt44+gVHkSOhf2/E90i8gveA6Maz98f0EwYFk03XEM/CA==",
-            "dev": true,
-            "requires": {
-                "eslint-config-prettier": "^3.3.0",
-                "prettier": "^1.19.1"
-            }
-        },
         "@open-wc/scoped-elements": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-1.1.1.tgz",
@@ -1766,9 +1756,9 @@
             "dev": true
         },
         "@types/node": {
-            "version": "14.0.11",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.11.tgz",
-            "integrity": "sha512-lCvvI24L21ZVeIiyIUHZ5Oflv1hhHQ5E1S25IRlKIXaRkVgmXpJMI3wUJkmym2bTbCe+WoIibQnMVAU3FguaOg==",
+            "version": "14.0.12",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.12.tgz",
+            "integrity": "sha512-/sjzehvjkkpvLpYtN6/2dv5kg41otMGuHQUt9T2aiAuIfleCQRQHXXzF1eAw/qkZTj5Kcf4JSTf7EIizHocy6Q==",
             "dev": true
         },
         "@types/path-is-inside": {
@@ -3810,9 +3800,9 @@
             "dev": true
         },
         "electron-to-chromium": {
-            "version": "1.3.464",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.464.tgz",
-            "integrity": "sha512-Oo+0+CN9d2z6FToQW6Hwvi9ez09Y/usKwr0tsDsyg43a871zVJCi1nR0v03djLbRNcaCKjtrnVf2XJhTxEpPCg==",
+            "version": "1.3.465",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.465.tgz",
+            "integrity": "sha512-K/lUeT3NLAsJ5SHRDhK3/zd0tw7OUllYD8w+fTOXm6ljCPsp2qq+vMzxpLo8u1M27ZjZAjRbsA6rirvne2nAMQ==",
             "dev": true
         },
         "elegant-spinner": {
@@ -4149,9 +4139,9 @@
             }
         },
         "eslint-config-prettier": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-3.6.0.tgz",
-            "integrity": "sha512-ixJ4U3uTLXwJts4rmSVW/lMXjlGwCijhBJHk8iVqKKSifeI0qgFEfWl8L63isfc8Od7EiBALF6BX3jKLluf/jQ==",
+            "version": "6.11.0",
+            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
+            "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
             "dev": true,
             "requires": {
                 "get-stdin": "^6.0.0"
@@ -8326,9 +8316,9 @@
             "dev": true
         },
         "prettier": {
-            "version": "1.19.1",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-            "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
+            "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
             "dev": true
         },
         "private": {

package.json

@@ -15,7 +15,8 @@
     "devDependencies": {
         "eslint": "^6.1.0",
         "@open-wc/eslint-config": "^2.0.0",
-        "@open-wc/prettier-config": "^0.1.10",
+        "prettier": "^2.0.4",
+        "eslint-config-prettier": "^6.11.0",
         "husky": "^1.0.0",
         "lint-staged": "^8.0.0",
         "@open-wc/testing-karma": "^3.0.0",
@@ -30,7 +31,11 @@
             "eslint-config-prettier"
         ]
     },
-    "prettier": "@open-wc/prettier-config",
+    "prettier": {
+        "singleQuote": true,
+        "arrowParens": "avoid",
+        "tabWidth": 4
+    },
     "husky": {
         "hooks": {
             "pre-commit": "lint-staged"

src/helmholtz-marketplace-app.js

@@ -4,207 +4,215 @@ import '@material/mwc-icon-button';
 import '@material/mwc-top-app-bar-fixed';
 
 class HelmholtzMarketplaceApp extends LitElement {
-  constructor() {
-    super();
-    this.src =
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCA' +
-      'YAAACTphZWAAAAAXNSR0IArs4c6QAAAJZlWElmTU0AKgAAAAgABQESAAMAAAABA' +
-      'AEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgExAAIAAAARAAAAWodpAAQAAAAB' +
-      'AAAAbAAAAAAAAACWAAAAAQAAAJYAAAABd3d3Lmlua3NjYXBlLm9yZwAAAAOgAQAD' +
-      'AAAAAQABAACgAgAEAAAAAQAAAAugAwAEAAAAAQAAAAUAAAAAay66LwAAAAlwSFlz' +
-      'AAAXEgAAFxIBZ5/SUgAAActpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4Onht' +
-      'cG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlI' +
-      'DUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy' +
-      '8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG' +
-      'lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbn' +
-      'MuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodH' +
-      'RwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYX' +
-      'RvclRvb2w+d3d3Lmlua3NjYXBlLm9yZzwveG1wOkNyZWF0b3JUb29sPgogICAgIC' +
-      'AgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgIC' +
-      'A8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGM' +
-      'tVWAAAAJtJREFUCB1jYACB//8ZwTQBghGskJHxP4PCfA7f8F9imx/zMDL8/cvFwP' +
-      'hXhIGV+Q3Dv7/8DL++XWFYnf2FhQGkMHS+RKbdPRemf4yfGR6quDIz/+P6y8D4lu' +
-      'HvvxsM/5msGNi4ZgMtPcECstlGhO3nx0+8V/79Z37L8P3POWYuZsG/rAxPGb5z/m' +
-      'Fg+3WJ4de/xzAXEuVeoMcYAVOHNwrP7xEAAAAAAElFTkSuQmCC';
-  }
+    constructor() {
+        super();
+        this.src =
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCA' +
+            'YAAACTphZWAAAAAXNSR0IArs4c6QAAAJZlWElmTU0AKgAAAAgABQESAAMAAAABA' +
+            'AEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgExAAIAAAARAAAAWodpAAQAAAAB' +
+            'AAAAbAAAAAAAAACWAAAAAQAAAJYAAAABd3d3Lmlua3NjYXBlLm9yZwAAAAOgAQAD' +
+            'AAAAAQABAACgAgAEAAAAAQAAAAugAwAEAAAAAQAAAAUAAAAAay66LwAAAAlwSFlz' +
+            'AAAXEgAAFxIBZ5/SUgAAActpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4Onht' +
+            'cG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlI' +
+            'DUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy' +
+            '8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG' +
+            'lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbn' +
+            'MuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodH' +
+            'RwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYX' +
+            'RvclRvb2w+d3d3Lmlua3NjYXBlLm9yZzwveG1wOkNyZWF0b3JUb29sPgogICAgIC' +
+            'AgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgIC' +
+            'A8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGM' +
+            'tVWAAAAJtJREFUCB1jYACB//8ZwTQBghGskJHxP4PCfA7f8F9imx/zMDL8/cvFwP' +
+            'hXhIGV+Q3Dv7/8DL++XWFYnf2FhQGkMHS+RKbdPRemf4yfGR6quDIz/+P6y8D4lu' +
+            'HvvxsM/5msGNi4ZgMtPcECstlGhO3nx0+8V/79Z37L8P3POWYuZsG/rAxPGb5z/m' +
+            'Fg+3WJ4de/xzAXEuVeoMcYAVOHNwrP7xEAAAAAAElFTkSuQmCC';
+    }
 
-  static get properties() {
-    return {
-      src: { type: String }
-    };
-  }
+    static get properties() {
+        return {
+            src: { type: String },
+        };
+    }
 
-  static get styles() {
-    return css`
-      :host {
-        height: 100vh;
-        width: 100vw;
-        display: flex;
-        flex-direction: column;
-        min-width: 400px;
-      }
-      .body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        font-size: calc(10px + 2vmin);
-        color: #1a2b42;
-        margin: 0 auto;
-        text-align: center;
-      }
-      .high-res-img {
-        max-width: 100%;
-        height: auto;
-        width: auto\\9; /* ie8 */
-      }
-      .low-res-img {
-        max-width: 100vw;
-        height: 300px;
-        width: 100%;
-      }
-      .hidden {
-        display: none;
-      }
-      .welcome {
-        max-width: 90vw;
-        box-sizing: border-box;
-      }
-      #alt {
-        color: green;
-      }
-      .spacer {
-        width: 100vw;
-        height: 20vh;
-      }
-      .header {
-        --mdc-theme-primary: #222322;
-      }
-      .header > mwc-button {
-        --mdc-button-outline-color: white;
-      }
-      h1 {
-        margin: 0;
-        font-size: 3em;
-        padding: 0;
-        color: white;
-        font-family: 'Luckiest Guy', arial;
-        text-shadow: 0 0.1em 20px black, 0.05em -0.03em 0 black,
-          0.05em 0.005em 0 black, 0em 0.08em 0 black, 0.05em 0.08em 0 black,
-          0px -0.03em 0 black, -0.03em -0.03em 0 black, -0.03em 0.08em 0 black,
-          -0.03em 0 0 black;
-      }
-      h1 span {
-        -webkit-transform: scale(0.9);
-        transform: scale(0.9);
-        display: inline-block;
-      }
-      h1 span:first-child {
-        -webkit-animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)
-          forwards 30 alternate;
-        animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 30
-          alternate;
-      }
-      h1 span:last-child {
-        -webkit-animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
-          forwards 30 alternate;
-        animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
-          30 alternate;
-      }
+    static get styles() {
+        return css`
+            :host {
+                height: 100vh;
+                width: 100vw;
+                display: flex;
+                flex-direction: column;
+                min-width: 400px;
+            }
+            .body {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                font-size: calc(10px + 2vmin);
+                color: #1a2b42;
+                margin: 0 auto;
+                text-align: center;
+            }
+            .high-res-img {
+                max-width: 100%;
+                height: auto;
+                width: auto\\9; /* ie8 */
+            }
+            .low-res-img {
+                max-width: 100vw;
+                height: 300px;
+                width: 100%;
+            }
+            .hidden {
+                display: none;
+            }
+            .welcome {
+                max-width: 90vw;
+                box-sizing: border-box;
+            }
+            #alt {
+                color: green;
+            }
+            .spacer {
+                width: 100vw;
+                height: 20vh;
+            }
+            .header {
+                --mdc-theme-primary: #222322;
+            }
+            .header > mwc-button {
+                --mdc-button-outline-color: white;
+            }
+            h1 {
+                margin: 0;
+                font-size: 3em;
+                padding: 0;
+                color: white;
+                font-family: 'Luckiest Guy', arial;
+                text-shadow: 0 0.1em 20px black, 0.05em -0.03em 0 black,
+                    0.05em 0.005em 0 black, 0em 0.08em 0 black,
+                    0.05em 0.08em 0 black, 0px -0.03em 0 black,
+                    -0.03em -0.03em 0 black, -0.03em 0.08em 0 black,
+                    -0.03em 0 0 black;
+            }
+            h1 span {
+                -webkit-transform: scale(0.9);
+                transform: scale(0.9);
+                display: inline-block;
+            }
+            h1 span:first-child {
+                -webkit-animation: bop 1s
+                    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 30
+                    alternate;
+                animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+                    forwards 30 alternate;
+            }
+            h1 span:last-child {
+                -webkit-animation: bopB 1s 0.2s
+                    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 30
+                    alternate;
+                animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+                    forwards 30 alternate;
+            }
 
-      @-webkit-keyframes bop {
-        0% {
-          -webkit-transform: scale(0.9);
-          transform: scale(0.9);
-        }
-        50%,
-        100% {
-          -webkit-transform: scale(1);
-          transform: scale(1);
-        }
-      }
+            @-webkit-keyframes bop {
+                0% {
+                    -webkit-transform: scale(0.9);
+                    transform: scale(0.9);
+                }
+                50%,
+                100% {
+                    -webkit-transform: scale(1);
+                    transform: scale(1);
+                }
+            }
 
-      @keyframes bop {
-        0% {
-          -webkit-transform: scale(0.9);
-          transform: scale(0.9);
-        }
-        50%,
-        100% {
-          -webkit-transform: scale(1);
-          transform: scale(1);
-        }
-      }
-      @-webkit-keyframes bopB {
-        0% {
-          -webkit-transform: scale(0.9);
-          transform: scale(0.9);
-        }
-        80%,
-        100% {
-          -webkit-transform: scale(1) rotateZ(-3deg);
-          transform: scale(1) rotateZ(-3deg);
-        }
-      }
-      @keyframes bopB {
-        0% {
-          -webkit-transform: scale(0.9);
-          transform: scale(0.9);
-        }
-        80%,
-        100% {
-          -webkit-transform: scale(1) rotateZ(-3deg);
-          transform: scale(1) rotateZ(-3deg);
-        }
-      }
-    `;
-  }
+            @keyframes bop {
+                0% {
+                    -webkit-transform: scale(0.9);
+                    transform: scale(0.9);
+                }
+                50%,
+                100% {
+                    -webkit-transform: scale(1);
+                    transform: scale(1);
+                }
+            }
+            @-webkit-keyframes bopB {
+                0% {
+                    -webkit-transform: scale(0.9);
+                    transform: scale(0.9);
+                }
+                80%,
+                100% {
+                    -webkit-transform: scale(1) rotateZ(-3deg);
+                    transform: scale(1) rotateZ(-3deg);
+                }
+            }
+            @keyframes bopB {
+                0% {
+                    -webkit-transform: scale(0.9);
+                    transform: scale(0.9);
+                }
+                80%,
+                100% {
+                    -webkit-transform: scale(1) rotateZ(-3deg);
+                    transform: scale(1) rotateZ(-3deg);
+                }
+            }
+        `;
+    }
 
-  render() {
-    return html`
-      <mwc-top-app-bar-fixed class="header">
-        <mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
-        <div slot="title"></div>
-      </mwc-top-app-bar-fixed>
-      <div class="body">
-        <div class="spacer"></div>
-        <div class="welcome">
-          <h1><span>welcome</span>&nbsp;&nbsp;<span>TO</span></h1>
-        </div>
-        <img id="logo" class="show low-res-img" src="${this.src}" alt />
-        <div id="alt" class="hidden"><h1>Helmholtz Marketplace</h1></div>
-        <div>
-          <p><code>/we are in design phase/</code></p>
-          <p>coming soon - <code>version: 0.0.1</code></p>
-        </div>
-      </div>
-    `;
-  }
+    render() {
+        return html`
+            <mwc-top-app-bar-fixed class="header">
+                <mwc-icon-button
+                    icon="menu"
+                    slot="navigationIcon"
+                ></mwc-icon-button>
+                <div slot="title"></div>
+            </mwc-top-app-bar-fixed>
+            <div class="body">
+                <div class="spacer"></div>
+                <div class="welcome">
+                    <h1><span>welcome</span>&nbsp;&nbsp;<span>TO</span></h1>
+                </div>
+                <img id="logo" class="show low-res-img" src="${this.src}" alt />
+                <div id="alt" class="hidden">
+                    <h1>Helmholtz Marketplace</h1>
+                </div>
+                <div>
+                    <p><code>/we are in design phase/</code></p>
+                    <p>coming soon - <code>version: 0.0.1</code></p>
+                </div>
+            </div>
+        `;
+    }
 
-  firstUpdated(changedProperties) {
-    if (changedProperties) {
-      fetch('../images/hifis-logo.png')
-        .then(response => {
-          if (!response.ok) {
-            throw new Error('Network response was not ok');
-          }
-          return response.blob();
-        })
-        .then(myBlob => {
-          this.src = URL.createObjectURL(myBlob);
-          this.shadowRoot
-            .getElementById('logo')
-            .classList.replace('low-res-img', 'high-res-img');
-        })
-        .catch(() => {
-          this.shadowRoot
-            .getElementById('alt')
-            .classList.replace('hidden', 'show');
-          this.shadowRoot
-            .getElementById('logo')
-            .classList.replace('show', 'hidden');
-        });
+    firstUpdated(changedProperties) {
+        if (changedProperties) {
+            fetch('../images/hifis-logo.png')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.blob();
+                })
+                .then(myBlob => {
+                    this.src = URL.createObjectURL(myBlob);
+                    this.shadowRoot
+                        .getElementById('logo')
+                        .classList.replace('low-res-img', 'high-res-img');
+                })
+                .catch(() => {
+                    this.shadowRoot
+                        .getElementById('alt')
+                        .classList.replace('hidden', 'show');
+                    this.shadowRoot
+                        .getElementById('logo')
+                        .classList.replace('show', 'hidden');
+                });
+        }
     }
-  }
 }
 customElements.define('helmholtz-marketplace-app', HelmholtzMarketplaceApp);

test/helmholtz-marketplace-app.test.js

@@ -3,20 +3,20 @@ import { html, fixture, expect } from '@open-wc/testing';
 import '../src/helmholtz-marketplace-app.js';
 
 describe('Helmholtz Marketplace App Shell', () => {
-  let element;
-  beforeEach(async () => {
-    element = await fixture(html`
-      <helmholtz-marketplace-app></helmholtz-marketplace-app>
-    `);
-  });
-  it('renders a header', () => {
-    const header = element.shadowRoot.querySelector('mwc-top-app-bar-fixed');
-    expect(header).to.exist;
-    expect(header.classList.contains('header')).be.true;
-  });
-  it('renders a body', async () => {
-    const body = element.shadowRoot.querySelector('.body');
-    expect(body).to.exist;
-    expect(body.classList.contains('body')).be.true;
-  });
+    let element;
+    beforeEach(async () => {
+        element = await fixture(html`
+            <helmholtz-marketplace-app></helmholtz-marketplace-app>
+        `);
+    });
+    it('renders a header', () => {
+        const header = element.shadowRoot.querySelector('mwc-top-app-bar-fixed');
+        expect(header).to.exist;
+        expect(header.classList.contains('header')).be.true;
+    });
+    it('renders a body', async () => {
+        const body = element.shadowRoot.querySelector('.body');
+        expect(body).to.exist;
+        expect(body.classList.contains('body')).be.true;
+    });
 });