noi-techpark#5 refactor common components

src/blocks/backdrop/backdrop.css

@@ -28,7 +28,15 @@
   left: 0;
   bottom: 0;
   right: 0;
-  background: rgba(0, 0, 0, 0.1);
+
+  /**
+   * @prop --backdrop-color: backdrop color
+   */
+  background: var(--backdrop-color, rgba(0, 0, 0, 0.1));
+  /**
+   * @prop --backdrop-filter: backdrop color
+   */
+  backdrop-filter: var(--backdrop-filter, none);
 }
 
 .content {

src/blocks/button/button.component.tsx

@@ -34,6 +34,7 @@ export class ButtonComponent {
 
     return <Host class={hostClass}>
       <button class={btnClass}
+              part="button-native"
               type="button"
               disabled={this.disabled}
               onClick={(e) => this.btnClick.emit(e)}>

src/blocks/button/button.css

@@ -10,13 +10,20 @@
 
 
 .btn {
+  padding: 0;
+  margin: 0;
   border: none;
   background: inherit;
-  color: inherit;
   font-family: inherit;
   cursor: pointer;
   overflow: hidden;
   user-select: none;
+  font-size: inherit;
+
+  /**
+   * @prop --color: Text color
+   */
+  color: var(--color, inherit);
 }
 
 .btn--icon {
@@ -30,7 +37,14 @@
 
 .btn:hover:not(:disabled),
 .btn:focus:not(:disabled) {
-  background: rgba(var(--color-primary-rgb--inner), 0.2);
+  /**
+   * @prop --color-bg-hover: Background hover color (rgb)
+   */
+  background: var(--color-bg-hover, rgba(0, 104, 180, 0.2));
+  /**
+   * @prop --color-hover: Background hover color (rgb)
+   */
+  color: var(--color-hover, var(--color, inherit));
 }
 
 .btn:disabled {

src/blocks/icon/icon.component.tsx

@@ -4,13 +4,28 @@
 
 import { Component, h, Prop } from "@stencil/core";
 
+export type IconName = 'close'
+  | 'stations'
+  | 'search'
+  ;
+
+/**
+ * (INTERNAL) render an icon.
+ *
+ * Icons are embedded inside the component (so far).
+ *
+ * Icon size can be changed by 'font-size' style
+ */
 @Component({
   tag: 'noi-icon',
   styleUrl: 'icon.css',
   shadow: true,
 })
 export class IconComponent {
 
+  /**
+   * icon name
+   */
   @Prop()
   name: string;
 

src/blocks/icon/icon.css

@@ -7,6 +7,8 @@
 :host {
   display: inline-block;
   line-height: 0; /* ignore possible whitespace */
+  height: 1.5em;
+  width: 1.5em;
 }
 
 svg {

src/blocks/input/input.component.tsx

@@ -36,16 +36,17 @@ export class InputComponent {
   render() {
     let hostClass = 'input input--prefix input--suffix';
     return <Host class={hostClass}>
-      <div class="input__prefix">
+      <div class="input__prefix" part="input-prefix">
         <noi-icon name="search"></noi-icon>
       </div>
       <input class="input__input"
+             part="input-native"
              ref={(input) => (this.nativeInput = input)}
              placeholder={this.placeholder}
              onInput={() => this.onValueChanged()}
       />
       <div class="input__suffix">
-        <noi-button class="input__clear-btn" disabled={ !this.hasValue} iconOnly={true} onBtnClick={() => this.clearValue()}>
+        <noi-button class="input__clear-btn" part="clear-btn" disabled={ !this.hasValue} iconOnly={true} onBtnClick={() => this.clearValue()}>
           <noi-icon name="close"></noi-icon>
         </noi-button>
       </div>

src/blocks/input/input.css

@@ -8,7 +8,11 @@
   display: flex;
   justify-content: stretch;
   position: relative;
-  color: var(--color-text--inner);
+
+  /**
+   * @prop --color-text: Text color
+   */
+  color: var(--color-text);
 }
 
 
@@ -39,9 +43,12 @@
 .input__input {
   flex: 1;
   padding: 8px;
-  border: 1px solid var(--color-text--inner);
-  background: var(--color-background--inner);
-  color: var(--color-text--inner);
+  border: 1px solid var(--color-text);
+  /**
+   * @prop --color-background: Background color
+   */
+  background: var(--color-background);
+  color: var(--color-text);
 
   font-size: 18px;
   font-weight: 400;
@@ -56,7 +63,6 @@
   padding-right: 40px;
 }
 
-
 .input__clear-btn.disabled {
   opacity: 0;
 }

src/blocks/map/noi-map.css

@@ -9,14 +9,11 @@ noi-brennerlec-map {
   display: block;
   contain: content;
   box-sizing: border-box;
-
-  /**
-   * @prop --color---map-filter: Map filter
-   */
-  --map-filter--inner: var(--map-filter, grayscale(100%));
 }
 
 .leaflet-tile {
-  /*filter: grayscale(100%);*/
-  filter: var(--map-filter--inner);
+  /**
+   * @prop --map-filter: Map filter
+   */
+  filter: var(--map-filter, grayscale(100%));
 }

src/road-webcam/road-webcam-list/road-webcam-list.component.tsx

@@ -88,7 +88,8 @@ export class RoadWebcamListComponent {
           <noi-icon class="title__icon" name="stations"></noi-icon>
           <span class="title__text">{this.languageService.translate('app.list.title')}</span>
         </div>
-        <noi-input placeholder={this.languageService.translate('app.list.search.placeholder')}
+        <noi-input class="title__search"
+                   placeholder={this.languageService.translate('app.list.search.placeholder')}
                    onValueChange={v => this.filterData(v.detail)}></noi-input>
       </div>
       <div class="list">

src/road-webcam/road-webcam-list/road-webcam-list.css

@@ -74,6 +74,16 @@
   flex: 1;
 }
 
+.title__search {
+  --color-text: var(--color-text--inner);
+  --color-background: var(--color-background--inner);
+}
+
+.title__search::part(clear-btn) {
+  --color-bg-hover: var(--color-button-hover--inner);
+}
+
+
 .list {
   flex: 1;
   overflow: auto;

src/road-webcam/road-webcam/road-webcam.css

@@ -46,6 +46,8 @@
    */
   --color-background--inner: var(--color-background, #FFFFFF);
 
+  /* private */
+  --color-button-hover--inner: rgba(var(--color-primary-rgb--inner), 0.2);
 }
 
 :host(.layout--tablet),
@@ -83,7 +85,6 @@ noi-brennerlec-map {
 
 
 .popup__title {
-  font-size: 22px;
   font-weight: 500;
   color: var(--color-primary--inner);
 
@@ -93,6 +94,7 @@ noi-brennerlec-map {
 }
 
 .popup__title-text {
+  font-size: 22px;
   flex: 1;
 }
 
@@ -110,6 +112,10 @@ noi-brennerlec-map {
   object-fit: contain;
 }
 
+.popup__close-btn {
+  --color-bg-hover: var(--color-button-hover--inner);
+}
+
 /* Map */
 .noi-map-line {
   stroke: var(--color-marker--inner);