@progressive-development/pd-page 0.0.60 → 0.0.62

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive development page helper, teaser, menu, footer.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,24 +17,25 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-contact": "0.0.34",
-    "@progressive-development/pd-dialog": "0.0.47",
-    "@progressive-development/pd-forms": "^0.1.2",
-    "@progressive-development/pd-icon": "^0.0.9",
-    "lit": "^2.0.2"
+    "@progressive-development/pd-contact": "0.0.36",
+    "@progressive-development/pd-dialog": "0.0.49",
+    "@progressive-development/pd-forms": "^0.1.4",
+    "@progressive-development/pd-icon": "^0.1.8",
+    "lit": "^2.2.0",
+    "pwa-helpers": "^0.9.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "next",
-    "@web/dev-server": "^0.1.28",
+    "@web/dev-server": "^0.1.30",
     "@web/dev-server-storybook": "next",
-    "@web/test-runner": "^0.13.21",
+    "@web/test-runner": "^0.13.27",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.4.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.4.1"
+    "prettier": "^2.5.1"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

package/src/PdContactUs.js

@@ -12,6 +12,8 @@ import '@progressive-development/pd-forms/pd-input.js';
 import '@progressive-development/pd-forms/pd-input-area.js';
 import '@progressive-development/pd-contact/pd-contact.js';
 
+import { SharedGlobalStyles } from './shared-global-styles.js';
+
 /**
  * An example element.
  *
@@ -25,50 +27,29 @@ export class PdContactUs extends LitElement {
    */
 
   static get styles() {
-    return css`
-      :host {
-        --my-background-color: var(--squi-test, #177e89);
-        --my-text-color: var(--squi-test, white);
-        --my-background-img: var(--pd-bg-image);
+    return [
+      SharedGlobalStyles,
+      css`
+      :host {                     
 
         display: flex;
         flex-flow: row;
-        background-color: var(--my-background-color);
+        background-color: var(--pd-contactus-bg-col, var(--pd-default-col));
 
-        background-image: var(--my-background-img);
+        background-image: var(--pd-contactus-bg-image);
         background-repeat: no-repeat;
 
         min-height: 500px; /* Temporär hier... */
         width: 100%;
       }
 
-      h1,
-      h2,
-      h3,
-      h4 {
-        font-family: var(--my-primary-font, 'Oswald');
-        font-style: normal;
-        color: #fefefe;
-        margin: 0;
-        padding: 0;
-      }
-
       h2 {
-        line-height: 1.4;
+        font-family: var(--pd-default-font-title-family);
+        font-style: normal;
+        color: var(--pd-contactus-font-col, var(--pd-default-bg-col));
         margin-top: 1.4em;
         margin-bottom: 2.5rem;
-        font-size: 2.5rem;
-      }
-
-      p {
-        margin-bottom: 1rem;
-        line-height: 1.5;
-        text-rendering: optimizeLegibility;
-        margin: 0;
-        padding: 0;
-
-        color: #323031;
-        font-size: 1.1rem;
+        font-size: var(--pd-contactus-font-h2-size, 2.5rem);
       }
 
       .content-block {
@@ -80,7 +61,7 @@ export class PdContactUs extends LitElement {
         max-width: 1170px;
         margin: 0 auto;
         text-align: left;
-        padding-left: 10px;
+        padding-left: 30px;
       }
 
       .contact-block {
@@ -99,7 +80,8 @@ export class PdContactUs extends LitElement {
       }
 
       .company-contact {
-        --squi-addrress-txt-color: #fefefe;
+        --app-font-content-col: var(--pd-contactus-font-col, var(--pd-default-bg-col));;
+        --app-font-title-col: var(--pd-contactus-font-col, var(--pd-default-bg-col));;
       }
 
       /* Size Elements for small width */
@@ -111,7 +93,7 @@ export class PdContactUs extends LitElement {
           justify-content: left;
         }
       }
-    `;
+    `];
   }
 
   static get properties() {
@@ -147,6 +129,7 @@ export class PdContactUs extends LitElement {
                   class="quarter3"
                   placeHolder="Naam"
                   valueName="name"
+                  autoCompleteName="full-name"
                   required
                 ></pd-input>
               </pd-form-row>
@@ -157,6 +140,8 @@ export class PdContactUs extends LitElement {
                   class="quarter3"
                   placeHolder="Email"
                   valueName="mail"
+                  autoCompleteName="email"                  
+                  name="email"
                   field-type="mail"
                   required
                 ></pd-input>

package/src/PdFooter.js

@@ -6,6 +6,7 @@
  */
 
 import { LitElement, html, css } from 'lit';
+import { SharedGlobalStyles } from './shared-global-styles.js';
 
 /**
  * An example element.
@@ -15,117 +16,93 @@ import { LitElement, html, css } from 'lit';
  */
 export class PdFooter extends LitElement {
   /**
-   * Fired when free date clicked => At the moment only for freeDates
-   * @event show-policy
+   * Fired when footer link clicked.
+   * @event footer-link
    */
 
+  static get properties() {
+    return {
+      version: { type: String },
+      copyright: { type: String },
+      madeBy: { type: Object },
+      footerLinks: { type: Array }
+    };
+  }
+
   static get styles() {
-    return css`
+    return [
+      SharedGlobalStyles,
+      css`
       :host {
-        --my-height: var(--squi-teaser-height, 130px);
-
-        --my-header-background-color: var(--squi-test, #084c61);
-        --my-header-text-color: var(--squi-test, white);        
-
-        --my-footer-background-color: var(--squi-test, #2bcadb);
-
         display: flex;
-        flex-flow: row;
-        justify-content: space-between;
-        background-color: #10565d; /*#177e89;/* #084c61;*/
-        height: var(--my-height);
+        flex-flow: column;
+        justify-content: end;
+        background-color: var(--pd-footer-bg-col, var(--pd-default-col));
         width: 100%;
+        white-space: nowrap;
       }
 
-      h1,
-      h2,
-      h3,
-      h4 {
-        font-family: var(--my-primary-font, 'Oswald');
-        font-style: normal;
-        margin: 0;
-        padding: 0;
+      .footer-links {
+        display: flex;        
+        align-items: center;
+        justify-content: right;
+        height: 100%;
+        color: var(--pd-footer-font-col, var(--pd-default-bg-col));
+        font-family: var(--pd-footer-font-family, var(--pd-default-font-title-family));
+        font-size: var(--pd-footer-font-size, 1.1em);
       }
 
-      .left-content {
-        width: 50%;
-        padding-left: 30px;
-        align-self: flex-end;
-        height: calc(var(--my-height) / 1.4);
+      .footer-links ul {        
+        display: flex;          
+        flex-wrap: wrap;         
+        list-style: none;
+        gap: 1em;
+        margin: 0px;        
+        padding: 2em 2.5em 2em 2.5em;        
       }
 
-      .right-content {
-        width: 50%;
-        padding-right: 30px;
+      .footer-links li {        
+        cursor: pointer;        
       }
 
-      .right-content ul {
-        display: flex;
-        justify-content: flex-end;
-        list-style: none;
-        margin-top: 0px;
-        margin-bottom: 0px;
-        height: 100%;
+      .footer-links li:hover {        
+        color: var(--pd-default-hover-col);
       }
 
-      .right-content li {
+      .bottom-line {
+        background-color: var(--pd-footer-bottom-col, var(--pd-default-light-col));
+        font-size: var(--pd-footer-bottom-font-size, 0.9em);
+        color: var(--pd-footer-bottom-font-col, var(--pd-default-dark-col));
+        padding: 0.5em;
         display: flex;
+        gap: 1em;
+        flex-wrap: wrap;
+        justify-content: space-between;
         align-items: center;
-        padding: 0rem 1rem;
-        height: 100%;
       }
 
-      .item,
-      .right-content p,
-      .left-content p {
-        color: #2bcadb;
-        font-size: 1.1rem;
-        white-space: nowrap;
+      .copyright {
+        font-weight: bold;
       }
 
       .version {
-        color: #9fbdc0;
-        font-style: italic;
-        font-size: 0.9rem;
+        font-weight: normal;
       }
 
       .madeBy {
-        color: white;
-        font-size: 0.9rem;
-      }
-
-      .madeBy:hover {
-        border-bottom: 1px solid #ffc857;
-      }
-
-      .madeBy:hover,
-      .item a:hover {
-        color: #ffc857;
         cursor: pointer;
+        font-style: italic;
       }
 
-      /* Size Elements for small width */
-      @media (max-width: 450px) {
-        .right-content ul {
-          height: 40%;
-        }
-
-        .right-content {
-          width: 30%;
-        }
+      .madeBy:hover {
+        color: var(--pd-default-col);
       }
-    `;
-  }
-
-  static get properties() {
-    return {
-      version: { type: String },
-    };
-  }
+    `];
+  }  
 
   constructor() {
-    super();
-    this.version = undefined;
+    super();    
+    this.footerLinks = [];
     this._mailTo = 'info@progressive-development.com';
   }
 
@@ -133,81 +110,40 @@ export class PdFooter extends LitElement {
 
   render() {
     return html`
-      <div class="left-content">
-        <p>
-          © ticomi technics<br />
-          <span class="version">${this.version} development by</span><br />
-          <span class="madeBy" @click="${this._mailToProgressiveDevelopment}"
-            >PD Progressive Development</span
-          >
-        </p>
-      </div>
-
-      <div class="right-content">
-        <ul>
-          <li class="item">
-            <a
-              @keypress="${() => {
-                console.log();
-              }}"
-              @click="${this._legalClicked}"
-              >Voorwaarden</a
-            >
-          </li>
-          <li class="item">
-            <a
-              @keypress="${() => {
-                console.log();
-              }}"
-              @click="${this._policyClicked}"
-              >Privacy</a
-            >
-          </li>
-          <li class="item">
-            <a
-              @keypress="${() => {
-                console.log();
-              }}"
-              @click="${this._cookiePolicyClicked}"
-              >Cookies</a
-            >
-          </li>
-        </ul>
-      </div>
-    `;
-  }
-
-  _mailToProgressiveDevelopment() {
-    window.location.href = `mailto:${this._mailTo}`;
+      
+        <div class="footer-links">
+            <ul>
+            ${this.footerLinks.map(link => html`
+              <li class="item">
+                <a @click="${this._footerLinkClicked}" data-link="${link.key}">${link.name}</a>
+              </li>
+            `)}
+            </ul>
+        </div>
+        <div class="bottom-line">
+          <div>
+            ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : ''}          
+            ${this.version ? html`<span class="version">${this.version}</span>` : ''}
+          </div>
+          ${this.madeBy ? html`<span class="madeBy" @click="${this._clickMadeby}">${this.madeBy.txt}</span>` : ''}
+        </div>
+      `;
   }
 
-  _legalClicked() {
-    // this.shadowRoot.getElementById('legalPopupId').showPopup();
-    this.dispatchEvent(
-      new CustomEvent('show-policy', {
-        detail: {
-          policy: 'legal'
-        }
-      })
-    );    
-  }
-
-  _policyClicked() {
-    // this.shadowRoot.getElementById('privacyPopupId').showPopup();
-    this.dispatchEvent(
-      new CustomEvent('show-policy', {
-        detail: {
-          policy: 'policy'
-        }
-      })
-    );    
+  _clickMadeby() {
+    if (this.madeBy.email) {
+      window.location.href = `mailto:${this.madeBy.email}`;
+    } else if (this.madeBy.link) {
+      window.open(this.madeBy.link, '_blank');
+    }
   }
 
-  _cookiePolicyClicked() {
+  _footerLinkClicked(e) {
+    const linkKey = e.target.dataset.link;
     this.dispatchEvent(
-      new CustomEvent('show-policy', {
+      new CustomEvent('footer-link', {
         detail: {
-          policy: 'cookie'
+          link: linkKey
         }
       })
     );    

package/src/PdMenu.js

@@ -5,9 +5,13 @@
  */
 
 import { LitElement, html, css } from 'lit';
+import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
 
+import { ICON_TOOGLE_ARROW as burgerIcon } from '@progressive-development/pd-icon/src/PdIcon.js';
 import '@progressive-development/pd-icon/pd-icon.js';
 
+import { SharedGlobalStyles } from './shared-global-styles.js';
+
 /**
  * An example element.
  *
@@ -15,90 +19,140 @@ import '@progressive-development/pd-icon/pd-icon.js';
  * @csspart button - The button
  */
 export class PdMenu extends LitElement {
+
   /**
    * Fired when route menu item clicked
    * @event route-event
    */
 
   static get styles() {
-    return css`
-      :host {
-        --my-height: var(--squi-teaser-height, 80px);
+    return [
+    SharedGlobalStyles,
+    css`
 
-        --my-bg-color: var(--squi-menu-bg-color, #177e89);
-        --my-header-text-color: var(--squi-test, white);        
+      :host {        
+        display: block;        
+        position: relative;
+        height: var(--pd-menu-height, 100px);
+        background-color: var(--pd-menu-bg-col, var(--pd-default-col));        
+        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);
+      }
 
+      .menu-container {        
+        height: 100%;
+        padding-left: 10px;
+        padding-right: 10px;        
         display: flex;
-        background-color: var(--my-bg-color);
-        height: var(--my-height);
-        width: 100%;
-
-        box-shadow: 3px 3px 5px grey;
+        align-items: center;
+        white-space: nowrap;
+        max-width: 1170px;        
+        margin: 0 auto;
       }
 
-      ul {
-        padding-left: 0px;
+      ul {        
         display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        max-width: 1170px;
-        margin: 0 auto;
+        align-items: center;
         list-style: none;
-        margin-top: 0px;
-        height: 100%;
+        gap: 1em;
+        margin: 0;        
+        padding: 0;
       }
 
       li {
         display: flex;
-        align-items: center;
-        padding: 0rem 1.1rem;
+        align-items: center;        
         cursor: pointer;
         height: 100%;
       }
 
       .item {
-        color: #fefefe;
-        font-family: Oswald, sans-serif;
-        font-size: 1.2rem;
-
-        --pd-icon-fill: var(--my-header-text-color);
-      }
-      .item.active {
-        color: #ffc857;
+        color: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        font-family: var(--pd-menu-font-family, var(--pd-default-font-title-family));
+        font-size: var(--pd-footer-font-size, 1.2em);
       }
+      
+      .item.active,
       .item:hover {
-        color: #ffc857;
-        /*border-bottom: 1px solid #FFC857;*/
-        /* Hack? => Set also Icon to hover color, else they react different 
-        (hover on text => icon not with hover color...) 
-        This is also the reason why icon-fill is defined for item, not for topMenuItem
-        Erkennbar: Farbe Icon leicht unterschiedlich zu Farbe Text nach hover icon.
-        */
-        --pd-icon-fill: #ffc857;
+        color: var(--pd-default-hover-col);
       }
 
-      .topItemLogo {
-        --pd-icon-size: 1.6rem;
-        --icon-transition: none;
-        pointer-events: none;
+      .item:hover .topItemLogo {
+        --pd-icon-stroke-col: var(--pd-default-hover-col);                
       }
 
       .topMenu {
-        margin-top: -15px;
+        width: 100%;        
+        justify-content: end;
+        padding-left: 10px;
+      }
+
+      .burger-menu {
+          display: flex;
+          width: 100%;          
+          visibility: hidden;
+          justify-content: end;
       }
 
+      .topItemLogo {
+        --pd-icon-size: 1.6rem;
+        /* TODO: noch vars übernehmen
+        --pd-icon-bg-col: var(--pd-menu-bg-col, var(--pd-default-col));
+        --pd-icon-col: var(--pd-menu-bg-col, var(--pd-default-dark-col));
+        --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        */
+
+        --pd-icon-bg-col: transparent;   
+        --pd-icon-stroke-col: var(--pd-default-bg-col);
+        --pd-icon-col: var(--pd-default-dark-col);        
+        pointer-events: none;
+      }      
+
       ::slotted(.logo) {
-        max-width: 8rem;
-        width: 8rem; /* wird sonst im Chrome nicht angezeigt*/
+        max-width: 8rem;        
+        width: 100%;
+        padding-right: 3em;
       }
 
-      /* Size Elements for small width */
-      @media (max-width: 440px) {
-        .changevis {
-          display: none;
+      /**
+       * Style for drop down menu on small screens.
+       */
+      @media (max-width: 500px) {
+
+        :host([_activeBurgerMenu]) ul {
+          visibility: visible;
+        }
+
+        .burger-menu {
+          visibility: visible;
+        }
+
+        ul {
+          visibility: hidden;
+          position: absolute;
+          flex-direction: column;
+          top: var(--pd-menu-height, 100px);
+          right: 0px;
+          background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
+          border: 1px solid var(--pd-menu-burger-font-col, var(--pd-default-dark-col));          
+          padding: 0.8em;
         }
+
+        li {                    
+          align-self: flex-start;                              
+        }
+
+        .item {
+          color: var(--pd-menu-burger-font-col, var(--pd-default-dark-col));
+        }
+
+        li:hover {
+          background-color: var(--pd-default-dark-col);
+        }
+
       }
-    `;
+
+      /* Media Query für 500 => Alles darunter mit Burger Menu */
+    `];
   }
 
   static get properties() {
@@ -107,6 +161,9 @@ export class PdMenu extends LitElement {
       topMenuItems: { type: Array },
       teaserClosed: { type: Boolean }, // TODO: Definiert um scroll position anzugleichen, unabhängiger machen...
       _activeSecIndex: { type: Number },
+      _smallScreen: { type: Boolean, state: true },
+      _activeBurgerMenu: { type: Boolean, reflect: true },
+      
     };
   }
 
@@ -117,6 +174,7 @@ export class PdMenu extends LitElement {
     this.teaserClosed = false;
 
     this._activeSecIndex = 0;
+    this._activeBurgerMenu = false;
   }
 
   firstUpdated() {
@@ -150,55 +208,70 @@ export class PdMenu extends LitElement {
   }
 
   render() {
+
+    installMediaQueryWatcher(`(max-width: 500px)`, matches => {
+      if (matches) {
+        this._smallScreen = true;
+      } else {
+        this._smallScreen = false;
+      }
+    });
+
     return html`
+    <div class="menu-container">
+      <slot class="logo-icon" name="slotLogo"></slot>
       <ul>
-        <li @click="${PdMenu._scrollToTop}">
-          <slot name="slotLogo"></slot>
-        </li>
+        ${this._renderItems(this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems, this._smallScreen)}
+      </ul>
 
-        ${this.menuItems.map(
+      ${!this._smallScreen ? html`
+        <ul class="topMenu">
+          ${this._renderItems(this.topMenuItems)}
+        </ul>
+      ` : html`
+        <div class="burger-menu">
+          <pd-icon class="round" icon="${burgerIcon}" ?activeIcon="${!this._activeBurgerMenu}" @click="${this._toggleBurgerMenu}"></pd-icon>
+        </div>
+      `}
+
+    </div>
+    `;
+  }
+
+  _renderItems(items, disableIcons) {
+    return html`
+    ${items.map(
           (item, index) => html`
             <li
               class="item ${this._activeSecIndex === index + 1
                 ? 'active'
-                : ''} changevis"
+                : ''}"
               data-sec="${item.sec}"
               data-route="${item.route}"
               @click="${this._menuItemClicked}"
             >
-              ${item.name}
-            </li>
-          `
-        )}
-      </ul>
-
-      <ul class="topMenu">
-        ${this.topMenuItems.map(
-          topItem => html`
-            <li
-              class="item"
-              data-sec="${topItem.sec}"
-              data-route="${topItem.route}"
-              @click="${this._menuItemClicked}"
-            >
-              ${topItem.icon
+            ${item.icon && !disableIcons
                 ? html`<pd-icon
                     class="topItemLogo"
-                    icon="${topItem.icon}"
+                    icon="${item.icon}"
                   ></pd-icon>`
                 : ''}
-              ${topItem.name}
-            </li>
+              ${item.name}
+            </li>       
           `
         )}
-      </ul>
     `;
   }
 
+  _toggleBurgerMenu() {
+    this._activeBurgerMenu = !this._activeBurgerMenu;
+  }
+
   _menuItemClicked(e) {
     const secParam = e.target.dataset.sec;
     const routeParam = e.target.dataset.route;
     if (secParam !== 'undefined' && secParam !== '') {
+      // TODO: Check if element exists
       this._scrollToContent(secParam);
     } else if (routeParam !== 'undefined' && routeParam !== '') {
       this.dispatchEvent(

package/src/PdTeaser.js

@@ -7,6 +7,8 @@ import { LitElement, html, css } from 'lit';
 
 import '@progressive-development/pd-icon/pd-icon.js';
 
+import { SharedGlobalStyles } from './shared-global-styles.js';
+
 /**
  * An example element.
  *
@@ -20,17 +22,17 @@ export class PdTeaser extends LitElement {
    */
 
   static get styles() {
-    return css`
+    return [
+      SharedGlobalStyles,
+      css`
       :host {
 
-        --my-height: var(--squi-teaser-height, 420px);        
+        --my-height: var(--pd-teaser-height, 420px);
 
-        display: block;    
-        background-color: #084c61;                       
-        
+        display: block;
+        background-color: var(--pd-teaser-bg-col, var(--pd-default-col));
       }
 
-      /* Layout Grid for the Wizard Component */
       .teaser {
         display: grid;
         grid-template-columns: minmax(10px, 200px) auto;
@@ -38,8 +40,7 @@ export class PdTeaser extends LitElement {
         grid-template-areas: 
           ". content"          
       }
-
-      /* Layout Grid for the Wizard Component */
+      
       .teaser-flex {
         display: flex;     
         justify-content: left;
@@ -58,16 +59,23 @@ export class PdTeaser extends LitElement {
         position: absolute;                
         top: calc(var(--my-height) / 2);        
         left: 10px;        
-        z-index: 1;   
-        --pd-icon-fill: white;
+        z-index: 1;           
       }
 
       .next {                
         position: absolute;        
         top: calc(var(--my-height) / 2);        
         right: 10px;   
-        z-index: 1;        
-        --pd-icon-fill: white;
+        z-index: 1;                
+      }
+
+      pd-icon {
+        --pd-icon-bg-col: transparent;   
+        --pd-icon-stroke-col: var(--pd-default-bg-col);
+        --pd-icon-col: var(--pd-default-dark-col);
+        --pd-icon-bg-col-hover: transparent;   
+        --pd-icon-stroke-col-hover: var(--pd-default-hover-col);
+        --pd-icon-col-hover: var(--pd-default-dark-col);
       }
       
       .content {
@@ -150,7 +158,7 @@ export class PdTeaser extends LitElement {
         }      
       }
       
-    `;
+    `];
   }
 
   static get properties() {

package/src/shared-global-styles.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+
+import { css } from 'lit';
+
+export const SharedGlobalStyles = css`
+
+  :host {
+    /** 
+     * Set default fonts for all pd-components.
+     * Use content, title and input categories for fonts.
+     */
+    --pd-default-font-title-family: var(--app-font-title-family);
+    --pd-default-font-content-family: var(--app-font-content-family);
+    --pd-default-font-input-family: var(--app-font-input-family);
+
+    --pd-default-font-title-col: var(--app-font-title-col, #0A3A48);    
+    --pd-default-font-content-col: var(--app-font-content-col, #353738);
+    --pd-default-font-input-col: var(--app-font-input-col, #353738);
+
+    --pd-default-font-content-size: var(--app-font-content-size, 1em);
+    --pd-default-font-input-size: var(--app-font-input-size, 1em);
+
+    /**
+     * Set default colors for all pd-components 
+     */
+    --pd-default-col: var(--app-primary-col, #067394);
+    --pd-default-light-col: var(--app-primary-light-col, #AFC1D2);
+    --pd-default-dark-col: var(--app-primary-dark-col, #0A3A48);
+    --pd-default-bg-col: var(--app-primary-bg-col, #fefefe);
+
+    --pd-default-hover-col: var(--app-hover-col, #ffc857);
+    --pd-default-error-col: var(--app-error-col, #cc2029);
+    --pd-default-error-light-col: var(--app-error-light-col, #ffe8e8);
+    --pd-default-success-col: var(--app-success-col, #42a01c);
+    --pd-default-success-light-col: var(--app-success-light-col, #f5ffe8);    
+    --pd-default-disabled-col: var(--app-disabled-col, #888585);
+    --pd-default-disabled-light-col: var(--app-disabled-light-col, lightgrey);    
+  }
+
+`;

package/stories/footer.stories.js

@@ -7,14 +7,35 @@ export default {
   argTypes: {},
 };
 
-function Template() {
+function Template({links, version, copyright, madeBy}) {
   return html`
-    <pd-footer version="0.1 Test">
-      <span slot="legal"><p>My AGB</p></span>
-      <span slot="privacy"><p>My Privacy</p></span>
+    <pd-footer version="${version}" copyright="${copyright}" .madeBy="${madeBy}"
+      .footerLinks="${links}">
     </pd-footer>
   `;
 }
 
 export const Footer = Template.bind({});
-Footer.args = {};
+Footer.args = {
+  links: [
+    {name: "Datenschutzerklärung", key: 'legal'}, 
+    {name: "Impressum"}, 
+    {name: "Location-Wiki"}
+  ],
+  version: "1.2.2 Test",
+  copyright: "ticomi",
+  madeBy: {
+    txt: "made by PD Progressive Development",
+    email: "info@progressive-development.com"
+  }
+};
+
+export const FooterSmallContent = Template.bind({});
+FooterSmallContent.args = {
+  links: [
+    {name: "Datenschutzerklärung", key: 'legal'}, 
+    {name: "Impressum"}, 
+    {name: "Location-Wiki"}
+  ],
+  version: "1.2.2 Test",  
+};