663 jasmine to vitest

components/appbar/appbar.css

@@ -15,7 +15,9 @@
 
 .navbar {
   color: var(--md-sys-color-on-surface);
-  height: var(--navbar-height-mobile);
+  height: var(--navbar-height);
+  display: flex;
+  align-items: center;
 }
 
 .navbar ul:not(.dropdown-content) {
@@ -53,5 +55,8 @@
 
 .navbar-fixed {
   position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   z-index: 997;
 }

components/appbar/appbar.mjs

@@ -1,51 +1,65 @@
 import { Component } from '../atomic/component.mjs';
 
-// AppBar is the old *Navbar*
+// AppBar is the old "Navbar"
 
 class AppBar extends Component {
-  #title = '';
+  #title;
+  #items;
 
+  /**
+   *
+   * @param {{isFixed: Boolean = false}} options
+   */
   constructor(options) {
     super(options);
-    this.setTagName('nav').addClassname('nav navbar');
+    this.#title = '';
+    this.#items = [];
+    if (typeof options === 'object' && options.isFixed) {
+      this.addClassname('navbar-fixed');
+    }
   }
 
+  addItem(item) {
+    this.#items.push(item);
+    return this;
+  }
+
+  //////////////////////// unstable api atm
+
   setTitle(title) {
     this.#title = title;
     return this;
   }
-
   setSearch() {
     return this;
   }
-
   setLogo() {
     return this;
   }
-
   addLeftIcon() {
     return this;
   }
-
   addRightIcon() {
     return this;
   }
 
+  //
+
   toHTML() {
-    const html = `<div class="nav-wrapper">
-      <a href="#" class="brand-logo">${this.#title}</a>
-      <ul class="right hide-on-med-and-down">
-        <li><a href="sass.html"><i class="material-icons">search</i></a></li>
-        <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
-        <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
-        <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
-      </ul>
-      <ul id="nav-mobile" class="right hide-on-med-and-down">
-        <li><a href="sass.html">Sass</a></li>
-        <li><a href="badges.html">Components</a></li>
-        <li><a href="collapsible.html">JavaScript</a></li>
-      </ul>
-    </div>`;
+    /*
+    <li><a href="sass.html"><i class="material-icons">search</i></a></li>
+    <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
+    <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
+    <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
+    */
+    const html = `<nav class="nav navbar">
+      <div class="nav-wrapper">
+        ${this.#title}
+        <ul class="right hide-on-med-and-down">
+          ${this.#items.map((item) => `<li>${item}</li>`).join('')}
+        </ul>
+      </div>
+    </nav>`;
     this.setChildren(html);
     return super.toHTML();
   }

components/appbar/appbar.test.mjs

@@ -1,8 +1,8 @@
-import { describe, expect, test } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { AppBar } from './appbar.mjs';
 
 describe('appBar', () => {
-  test('create html', () => {
+  it('should create the html', () => {
     const appBar = new AppBar();
     expect(appBar.toHTML()).toContain('<nav');
   });

components/atomic/component.mjs

@@ -10,16 +10,19 @@ class Component {
     this.#children = [];
     this.#classNames = [];
 
-    if (typeof options === 'object' && options !== null && options.children) {
-      if (typeof options.children === 'string') {
-        this.#children = options.children;
+    if (typeof options === 'object' && options !== null) {
+      // children
+      if (options.children) {
+        if (typeof options.children === 'string') {
+          this.#children = options.children;
+          return;
+        }
+        const kids = Array.isArray(options.children) ? options.children : [options.children];
+        kids.forEach((c) => this.addChild(c));
         return;
       }
-      const kids = Array.isArray(options.children) ? options.children : [options.children];
-      kids.forEach((c) => this.addChild(c));
-      return;
     }
-    this.#children = options;
+    this.#children = options; // TODO: Maybe do not do this
   }
 
   setChildren(children) {
@@ -61,10 +64,10 @@ class Component {
 
     if (Array.isArray(this.#children)) {
       const innerHTML = this.#children.map((child) => child.toHTML()).join('');
-      return `<${this.#tagname}${classAttr}${otherAttrs}>${innerHTML}</${this.#tagname}>`;
+      return `<${this.#tagname}${classAttr}${otherAttrs}>\n${innerHTML}</${this.#tagname}>\n`;
     }
 
-    return `<${this.#tagname}${classAttr}${otherAttrs}>${this.#children ?? ''}</${this.#tagname}>`;
+    return `<${this.#tagname}${classAttr}${otherAttrs}>${this.#children ?? ''}</${this.#tagname}>\n`;
   }
 
   toDOM() {

components/atomic/page.mjs

@@ -1,26 +1,39 @@
 import { Component } from './component.mjs';
 
 class Page extends Component {
+  #langCode;
   #title;
   #metaDescription;
-  #styleList = [];
-  #css = [];
+  #css;
+  #cssUrls;
+  #scripts;
+  #scriptUrls;
 
   constructor(options) {
     super(options);
-    this.setTagName('html');
+    //this.setTagName('html');
     if (options.title) this.setTitle(options.title);
+    this.#langCode = 'en';
+    this.#cssUrls = [];
+    this.#scriptUrls = [];
+    this.#css = [];
+    this.#scripts = [];
   }
 
   addStyleUrl(url) {
-    this.#styleList.push(url);
+    this.#cssUrls.push(url);
     return this;
   }
   addStyle(css) {
     this.#css.push(css);
     return this;
   }
-  addJavascriptUrl() {
+  addJavascriptUrl(url) {
+    this.#scriptUrls.push(url);
+    return this;
+  }
+  addJavascript(script) {
+    this.#scripts.push(script);
     return this;
   }
   setTitle(title) {
@@ -33,21 +46,27 @@ class Page extends Component {
   }
   // override
   toHTML() {
-    return `<head>
-        <title>${this.#title}</title>
-        ${this.#styleList
-          .map(
-            (s) => `<link type="text/css" rel="stylesheet" href="${s}" media="screen,projection"/>`
-          )
-          .join('')}
-        ${this.#css.map((s) => `<style>${s}</style>`).join('\n')}
-        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-      </head>
-      <body>
-        <main class="container">
-          ${super.toHTML()}
-        </main>
-      </body>`;
+    const content = super.toHTML();
+    return `<!DOCTYPE html>
+<html lang="${this.#langCode}">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>${this.#title}</title>
+    ${this.#cssUrls
+      .map(
+        (url) => `<link type="text/css" rel="stylesheet" href="${url}" media="screen,projection"/>`
+      )
+      .join('\n')}
+    ${this.#css.map((s) => `<style>${s}</style>`).join('\n')}
+  </head>
+  <body>
+    ${content}
+    ${this.#scriptUrls.map((url) => `<script src="${url}"></script>`).join('\n')}
+    ${this.#scripts.map((s) => `<script>${s}</script>`).join('\n')}
+  </body>
+</html>`;
   }
 }