Create base components button, modal .. (#331)

Create base components with shared styles, as start of make ui better.
For now shoul look same but underhood new copoments are used.

This should be first PR that handle this and many more comes. I am in
rush due conflict with other ppl, but should work as i tested.

Testing again and look at structure

Main goal i have global css not scope in component die loading times and
size of elements. (Modal due nature of lit and shadow dom is exception,
maybe later find better way).

Documenting the components will happen later as base components
establish their usage.

src/client/components/baseComponents/Button.ts

@@ -0,0 +1,35 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+@customElement("o-button")
+export class OButton extends LitElement {
+  @property({ type: String }) title = "";
+  @property({ type: String }) translationKey = "";
+  @property({ type: Boolean }) secondary = false;
+  @property({ type: Boolean }) block = false;
+  @property({ type: Boolean }) blockDesktop = false;
+  @property({ type: Boolean }) disable = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html`
+      <button
+        data-i18n="${this.translationKey}"
+        class=${classMap({
+          "c-button": true,
+          "c-button--block": this.block,
+          "c-button--blockDesktop": this.blockDesktop,
+          "c-button--secondary": this.secondary,
+          "c-button--disabled": this.disable,
+        })}
+        ?disabled=${this.disable}
+      >
+        ${this.title}
+      </button>
+    `;
+  }
+}