@progressive-development/pd-page 0.1.5 → 0.1.7

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.1.5",
+  "version": "0.1.7",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,10 +17,10 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-contact": "^0.1.3",
-    "@progressive-development/pd-dialog": "^0.1.6",
-    "@progressive-development/pd-forms": "^0.1.7",
-    "@progressive-development/pd-icon": "^0.1.10",
+    "@progressive-development/pd-contact": "^0.1.5",
+    "@progressive-development/pd-dialog": "^0.1.8",
+    "@progressive-development/pd-forms": "^0.1.9",
+    "@progressive-development/pd-icon": "^0.1.12",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "lit": "^2.2.0",
     "pwa-helpers": "^0.9.1"

package/src/PdContactUs.js

@@ -170,7 +170,7 @@ export class PdContactUs extends LitElement {
               </pd-form-row>
             </pd-form-container>
 
-            <pd-button text="Verzenden" @click="${this._sendMail}"></pd-button>
+            <pd-button text="Verzenden" @click="${this._sendMail}" primary></pd-button>
           </div>
         </div>
       </div>

package/src/PdFooter.js

@@ -48,7 +48,7 @@ export class PdFooter extends LitElement {
         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-family: var(--pd-footer-font-family, var(--pd-default-font-link-family));
         font-size: var(--pd-footer-font-size, 1.1em);
       }
 
@@ -56,7 +56,7 @@ export class PdFooter extends LitElement {
         display: flex;          
         flex-wrap: wrap;         
         list-style: none;
-        gap: 1em;
+        gap: 2em;
         margin: 0px;        
         padding: 2em 2.5em 2em 2.5em;        
       }

package/src/PdMenu.js

@@ -53,14 +53,14 @@ export class PdMenu extends LitElement {
         display: flex;
         align-items: center;
         list-style: none;
-        gap: 1em;
+        gap: 2em;
         margin: 0;        
         padding: 0;
       }
 
       li {
         display: flex;
-        align-items: center;        
+        align-items: center;                
         cursor: pointer;
         height: 100%;
       }
@@ -221,12 +221,12 @@ export class PdMenu extends LitElement {
     <div class="menu-container">
       <slot class="logo-icon" name="slotLogo"></slot>
       <ul>
-        ${this._renderItems(this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems, this._smallScreen)}
+        ${this._renderItems(this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems, true, this._smallScreen)}
       </ul>
 
       ${!this._smallScreen ? html`
         <ul class="topMenu">
-          ${this._renderItems(this.topMenuItems)}
+          ${this._renderItems(this.topMenuItems, false)}
         </ul>
       ` : html`
         <div class="burger-menu">
@@ -238,12 +238,12 @@ export class PdMenu extends LitElement {
     `;
   }
 
-  _renderItems(items, disableIcons) {
+  _renderItems(items, checkActiveClass, disableIcons) {
     return html`
     ${items.map(
           (item, index) => html`
             <li
-              class="item ${this._activeSecIndex === index + 1
+              class="item ${checkActiveClass && this._activeSecIndex === index + 1
                 ? 'active'
                 : ''}"
               data-sec="${item.sec}"

package/src/PdTeaser.js

@@ -69,11 +69,9 @@ export class PdTeaser extends LitElement {
         z-index: 1;                
       }
 
-      pd-icon {
-        --pd-icon-bg-col: transparent;   
+      pd-icon {        
         --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-col: var(--pd-default-dark-col);        
         --pd-icon-stroke-col-hover: var(--pd-default-hover-col);
         --pd-icon-col-hover: var(--pd-default-dark-col);
       }

package/src/PdTeaserContent.js

@@ -101,7 +101,7 @@ export class PdTeaserContent extends LitElement {
         color: var(--pd-teaser-font-col, var(--pd-default-bg-col));;
         font-size: var(--pd-teaser-font-subtitletitle-size, 1.5rem);
         font-family: var(--pd-teaser-font-family, var(--pd-default-font-content-family));
-        line-height: var(--pd-teaser-font-subtitletitle-size, 1.5rem);
+        line-height: var(--pd-teaser-font-subtitletitle-size, 1.8rem);
         margin-top: 0;
         margin-bottom: 1rem;
       }