@progressive-development/pd-page 0.0.62 → 0.1.0

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

package/src/PdContactUs.js

@@ -12,7 +12,7 @@ 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';
+import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
 
 /**
  * An example element.
@@ -28,7 +28,7 @@ export class PdContactUs extends LitElement {
 
   static get styles() {
     return [
-      SharedGlobalStyles,
+      PDColorStyles, PDFontStyles,
       css`
       :host {                     
 

package/src/PdFooter.js

@@ -6,7 +6,7 @@
  */
 
 import { LitElement, html, css } from 'lit';
-import { SharedGlobalStyles } from './shared-global-styles.js';
+import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
 
 /**
  * An example element.
@@ -31,7 +31,7 @@ export class PdFooter extends LitElement {
 
   static get styles() {
     return [
-      SharedGlobalStyles,
+      PDColorStyles, PDFontStyles,
       css`
       :host {
         display: flex;

package/src/PdMenu.js

@@ -10,7 +10,7 @@ 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';
+import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
 
 /**
  * An example element.
@@ -27,7 +27,7 @@ export class PdMenu extends LitElement {
 
   static get styles() {
     return [
-    SharedGlobalStyles,
+    PDColorStyles, PDFontStyles,
     css`
 
       :host {        

package/src/PdTeaser.js

@@ -7,7 +7,7 @@ import { LitElement, html, css } from 'lit';
 
 import '@progressive-development/pd-icon/pd-icon.js';
 
-import { SharedGlobalStyles } from './shared-global-styles.js';
+import { PDColorStyles } from '@progressive-development/pd-shared-styles';
 
 /**
  * An example element.
@@ -23,7 +23,7 @@ export class PdTeaser extends LitElement {
 
   static get styles() {
     return [
-      SharedGlobalStyles,
+      PDColorStyles,
       css`
       :host {
 

package/src/PdTeaserContent.js

@@ -5,6 +5,8 @@
 
 import { LitElement, html, css } from 'lit';
 
+import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
+
 /**
  * An example element.
  *
@@ -17,12 +19,14 @@ export class PdTeaserContent extends LitElement {
    * @event book-date
    */
 
-  static get styles() {
-    return css`
+  static get styles() {    
+    return [
+      PDColorStyles, PDFontStyles,
+      css`
       :host {
-        --my-background: var(--squi-teaser-image);
-        --my-background-size: var(--squi-teaser-image-size, auto);
-        --my-background-position: var(--squi-teaser-image-position, 100% 50%);
+        --my-background: var(--pd-teaser-image);
+        --my-background-size: var(--pd-teaser-image-size, auto);
+        --my-background-position: var(--pd-teaser-image-position, 100% 50%);
 
         display: grid;
         grid-template-columns: repeat(15, 1fr);
@@ -76,10 +80,10 @@ export class PdTeaserContent extends LitElement {
       }
 
       h1 {
-        color: #fefefe;
-        font-size: 2.2rem;
-        font-family: Oswald, sans-serif;
-        line-height: 1.4;
+        color: var(--pd-teaser-font-col, var(--pd-default-bg-col));
+        font-size: var(--pd-teaser-font-title-size, 2.2em);
+        font-family: var(--pd-teaser-font-family, var(--pd-default-font-title-family));
+        line-height: 1.4em;
         margin-top: 0;
         margin-bottom: 0.5rem;
       }
@@ -89,16 +93,15 @@ export class PdTeaserContent extends LitElement {
         display: block;
         width: 2.5rem;
         height: 0.125rem;
-        background: #fefefe;
+        background: var(--pd-teaser-font-col, var(--pd-default-light-col));
         margin: 1rem 0;
-        opacity: 0.5;
       }
 
       p {
-        color: #fefefe;
-        font-size: 1.5rem;
-        font-family: Montserrat, sans-serif;
-        line-height: 1.5;
+        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);
         margin-top: 0;
         margin-bottom: 1rem;
       }
@@ -187,7 +190,7 @@ export class PdTeaserContent extends LitElement {
           line-height: 1;
         }
       }
-    `;
+    `];
   }
 
   static get properties() {

package/stories/teaser.stories.js

@@ -15,7 +15,7 @@ const getTeaser = () => html`
       <pd-teaser-content
         slot="t1"
         primaryTxt="Boek nu uw goedkoopste serviceafspraak."
-        secondaryTxt="Lage kosten met snelle reactietijden."
+        secondaryTxt="Lage kosten met snelle reactietijden. Und das kann aber auch mal läönger werden, wenn es sein muss."
         style="--squi-teaser-image: url('/images/hero_1.svg');"
       >
       </pd-teaser-content>

package/src/shared-global-styles.js

@@ -1,43 +0,0 @@
-/**
- * @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);    
-  }
-
-`;