@progressive-development/pd-page 0.0.8 → 0.0.9

package/index.js

@@ -1 +0,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.8",
+  "version": "0.0.9",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -19,7 +19,7 @@
   "dependencies": {
     "lit": "^2.0.2",
     "@progressive-development/pd-contact": "0.0.2",
-    "@progressive-development/pd-forms": "0.0.13",
+    "@progressive-development/pd-forms": "0.0.14",
     "@progressive-development/pd-dialog": "0.0.7",
     "@progressive-development/pd-icon": "0.0.4"
   },

package/pd-contact-us.js

@@ -1,3 +1,3 @@
 import { PdContactUs } from './src/PdContactUs.js';
 
-window.customElements.define('pd-contact-us', PdContactUs);
+window.customElements.define('pd-contact-us', PdContactUs);

package/pd-footer.js

@@ -1,3 +1,3 @@
 import { PdFooter } from './src/PdFooter.js';
 
-window.customElements.define('pd-footer', PdFooter);
+window.customElements.define('pd-footer', PdFooter);

package/pd-menu.js

@@ -1,3 +1,3 @@
 import { PdMenu } from './src/PdMenu.js';
 
-window.customElements.define('pd-menu', PdMenu);
+window.customElements.define('pd-menu', PdMenu);

package/pd-teaser.js

@@ -2,4 +2,4 @@ import { PdTeaser } from './src/PdTeaser.js';
 import { PdTeaserContent } from './src/PdTeaserContent.js';
 
 window.customElements.define('pd-teaser', PdTeaser);
-window.customElements.define('pd-teaser-content', PdTeaserContent);
+window.customElements.define('pd-teaser-content', PdTeaserContent);

package/src/PdContactUs.js

@@ -153,53 +153,53 @@ export class PdContactUs extends LitElement {
           </div>
 
           <div class="right-content">
-            <squi-form-container>
-              <squi-form-row>
-                <squi-input
+            <pd-form-container>
+              <pd-form-row>
+                <pd-input
                   id="nameInputId"
                   class="quarter3"
                   placeHolder="Naam"
                   valueName="name"
                   errorMsg="${this._getErrorMsg('name')}"
-                ></squi-input>
-              </squi-form-row>
+                ></pd-input>
+              </pd-form-row>
 
-              <squi-form-row>
-                <squi-input
+              <pd-form-row>
+                <pd-input
                   id="mailInputId"
                   class="quarter3"
                   placeHolder="Email"
                   valueName="mail"
                   errorMsg="${this._getErrorMsg('mail')}"
-                ></squi-input>
-              </squi-form-row>
+                ></pd-input>
+              </pd-form-row>
 
-              <squi-form-row>
-                <squi-input
+              <pd-form-row>
+                <pd-input
                   id="phoneInputId"
                   class="quarter3"
                   placeHolder="Telefoon Nummer"
                   valueName="phone"
                   errorMsg="${this._getErrorMsg('phone')}"
-                ></squi-input>
-              </squi-form-row>
+                ></pd-input>
+              </pd-form-row>
 
-              <squi-form-row>
-                <squi-input-area
+              <pd-form-row>
+                <pd-input-area
                   id="msgInputId"
                   class="quarter3-area"
                   placeHolder="Type uw bericht hier"
                   rows="15"
                   valueName="msg"
                   errorMsg="${this._getErrorMsg('msg')}"
-                ></squi-input-area>
-              </squi-form-row>
-            </squi-form-container>
+                ></pd-input-area>
+              </pd-form-row>
+            </pd-form-container>
 
-            <squi-button
+            <pd-button
               text="Verzenden"
               @click="${this._sendMail}"
-            ></squi-button>
+            ></pd-button>
           </div>
         </div>
       </div>
@@ -264,4 +264,4 @@ export class PdContactUs extends LitElement {
     const mValid = /^\+?[0-9 ]{7,15}$/.test(phone);
     return mValid;
   }
-}
+}

package/src/PdFooter.js

@@ -110,8 +110,8 @@ export class PdFooter extends LitElement {
   }
 
   static get properties() {
-    return {      
-      version: { type: String }
+    return {
+      version: { type: String },
     };
   }
 
@@ -125,7 +125,8 @@ export class PdFooter extends LitElement {
   render() {
     return html`
       <div class="left-content">
-        <p>© ticomi technics<br/><span class="version">${this.version}</span>
+        <p>
+          © ticomi technics<br /><span class="version">${this.version}</span>
         </p>
       </div>
 
@@ -173,4 +174,4 @@ export class PdFooter extends LitElement {
   _policyClicked() {
     this.shadowRoot.getElementById('privacyPopupId').showPopup();
   }
-}
+}

package/src/PdMenu.js

@@ -99,7 +99,7 @@ export class PdMenu extends LitElement {
   }
 
   static get properties() {
-    return {      
+    return {
       menuItems: { type: Array },
       topMenuItems: { type: Array },
       teaserClosed: { type: Boolean }, // TODO: Definiert um scroll position anzugleichen, unabhängiger machen...
@@ -149,7 +149,6 @@ export class PdMenu extends LitElement {
   render() {
     return html`
       <ul>
-
         <li @click="${PdMenu._scrollToTop}">
           <slot name="slotLogo"></slot>
         </li>
@@ -157,7 +156,9 @@ export class PdMenu extends LitElement {
         ${this.menuItems.map(
           (item, index) => html`
             <li
-              class="item ${this._activeSecIndex === index + 1 ? 'active' : ''} changevis"
+              class="item ${this._activeSecIndex === index + 1
+                ? 'active'
+                : ''} changevis"
               data-sec="${item.sec}"
               data-route="${item.route}"
               @click="${this._menuItemClicked}"
@@ -230,4 +231,4 @@ export class PdMenu extends LitElement {
       });
     }
   }
-}
+}

package/src/PdTeaser.js

@@ -269,4 +269,4 @@ export class PdTeaser extends LitElement {
       this._currentNumber += 1;
     }
   }
-}
+}

package/stories/index.stories.js

@@ -1,9 +1,9 @@
 import { html } from 'lit';
-import '../pd-page.js';
+import '../pd-menu.js';
 
 export default {
-  title: 'PdPage',
-  component: 'pd-page',
+  title: 'PdMenu',
+  component: 'pd-menu',
   argTypes: {
     title: { control: 'text' },
     counter: { control: 'number' },
@@ -13,13 +13,13 @@ export default {
 
 function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
   return html`
-    <pd-page
+    <pd-menu
       style="--pd-page-text-color: ${textColor || 'black'}"
       .title=${title}
       .counter=${counter}
     >
       ${slot}
-    </pd-page>
+    </pd-menu>
   `;
 }
 

package/stories/menu.stories.js

@@ -0,0 +1,146 @@
+import { html } from 'lit';
+
+import '../pd-menu.js';
+
+const ticomiLogo = html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 298.09 120.94"
+    class="logo"
+  >
+    <g id="Ebene_2" data-name="Ebene 2">
+      <!--g style="fill: var(--logo-fill-1,#15a1dc)"-->
+      <g id="Ebene_1-2" data-name="Ebene 1">
+        <path
+          d="M115.21,72.59c-2,0-3.5-1.46-3.5-4.68V48.68h7.2V44h-7.17l.12-9.64h-7l-3.49,9.6-5,.65v4.1h4.44V61.75c0,2.68-.07,4.52-.07,6.91,0,6.78,3.64,9.55,9.87,9.55,5,0,8.23-2,10.05-5.49l-1.68-1.65A6.16,6.16,0,0,1,115.21,72.59Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M136.92,62.74V53.63l.21-10L136,42.92l-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74L137,73.26C137,69.89,136.92,65.66,136.92,62.74Z"
+          style="fill:#fff"
+        ></path>
+        <ellipse
+          cx="131.35"
+          cy="32.37"
+          rx="5.82"
+          ry="5.47"
+          style="fill:#fff"
+        ></ellipse>
+        <path
+          d="M163.55,46.46a10.9,10.9,0,0,1,1.29.08l.44,3.46c.33,4.84,2.56,6.51,5.27,6.51,2.47,0,3.89-1.12,4.63-3.58-.5-5.48-5.58-10-12.83-10-10.25,0-18.55,6.51-18.55,17.74,0,11.55,7.74,17.55,17.1,17.55,6.5,0,11.44-2.67,14.09-8.27l-2.39-2.11a9.87,9.87,0,0,1-7.73,3.82c-5.77,0-9.57-4.34-9.57-12.25C155.3,50.11,159.6,46.46,163.55,46.46Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M196.07,42.92c-9.83,0-17.44,6.95-17.44,17.51s6.72,17.78,17.44,17.78,17.44-7.07,17.44-17.78S205.86,42.92,196.07,42.92Zm0,31.7c-3.88,0-5.81-4.24-5.81-14s1.93-14.07,5.81-14.07,5.81,4.32,5.81,14.07S199.92,74.62,196.07,74.62Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M272.87,62.74V55.07c0-8.16-3.08-12.15-10-12.15-3.92,0-7.26,1.47-11.09,6.12-1.35-4.09-4.39-6.12-9.07-6.12-4.13,0-7.47,1.94-10.76,5.8l-.41-5.06-1.18-.74L216.8,47.49v2.7l4.2.62c.19,2.75.21,4.18.21,8v4c0,2.89,0,7.07-.1,10.43l-3.7.8v3.2h18.07V74l-3.23-.69c-.06-3.37-.1-7.62-.1-10.54V52.07a9.42,9.42,0,0,1,5.68-2.5c3,0,4,1.76,4,6.56v6.61c0,3,0,7.1-.09,10.43l-3.56.8v3.2h17.73V74l-3.23-.7c-.07-3.34-.1-7.52-.1-10.53v-8a22.71,22.71,0,0,0-.15-2.69,9.14,9.14,0,0,1,5.8-2.48c2.82,0,3.91,1.36,3.91,6.52v6.65c0,3,0,7.11-.09,10.44l-3.32.79v3.2H276.4V74L273,73.24C272.9,69.91,272.87,65.74,272.87,62.74Z"
+          style="fill:#fff"
+        ></path>
+        <ellipse
+          cx="288.99"
+          cy="32.37"
+          rx="5.82"
+          ry="5.47"
+          style="fill:#fff"
+        ></ellipse>
+        <path
+          d="M294.66,73.26c-.06-3.37-.09-7.6-.09-10.52V53.63l.2-10-1.18-.74-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M100.27,113.34V97.1H96.33V95.29l4-.22.29-7.31h2v7.31h7.32v2H102.6v16.42c0,3.22.81,5.4,4.29,5.4a9.14,9.14,0,0,0,3.17-.8l.61,1.88a14.75,14.75,0,0,1-4.13.94C101.69,120.94,100.27,117.87,100.27,113.34Zm17-5.6c0-8.24,5.36-13.3,11-13.3,6,0,9.67,4.25,9.67,11.68a10.92,10.92,0,0,1-.13,1.89H119.71c.09,6.37,3.82,10.93,9.51,10.93A11.4,11.4,0,0,0,136,116.7l1,1.76a13.84,13.84,0,0,1-8,2.48C122.55,120.94,117.32,116,117.32,107.74Zm18.49-1.64c0-6.45-2.92-9.66-7.46-9.66-4.26,0-8.12,3.62-8.65,9.66Zm10.84,1.64c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15A10,10,0,0,0,165,116l1.2,1.63a12,12,0,0,1-8.06,3.33C151.59,120.94,146.65,116.09,146.65,107.74Zm29.67-25.25h2.32v11l0,5.56c2.64-2.62,5.26-4.59,8.74-4.59,5.21,0,7.63,3.16,7.63,9.68v16.19h-2.32V104.43c0-5.36-1.69-7.9-5.75-7.9-3,0-5.19,1.59-8.26,4.74v19h-2.32ZM208,95.07h2l.25,3.91h.12c2.57-2.57,5.2-4.54,8.68-4.54,5.22,0,7.64,3.16,7.64,9.68v16.19h-2.32V104.43c0-5.36-1.7-7.9-5.76-7.9-3,0-5.18,1.59-8.25,4.74v19H208Zm31-8.16a2.12,2.12,0,0,1,4.23,0,2.12,2.12,0,0,1-4.23,0Zm.91,8.16h2.32v25.24h-2.32Zm13.85,12.67c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15a10,10,0,0,0,6.76-2.91l1.2,1.63a12,12,0,0,1-8.06,3.33C258.71,120.94,253.77,116.09,253.77,107.74Zm26.53,9.71,1.34-1.69a11.7,11.7,0,0,0,8,3.2c4,0,6-2.33,6-5,0-3.16-3.27-4.55-6.18-5.6-3.81-1.35-8-2.9-8-7.22,0-3.63,2.88-6.71,8.13-6.71a11.89,11.89,0,0,1,7.22,2.61l-1.25,1.68a9.6,9.6,0,0,0-6-2.31c-3.94,0-5.72,2.27-5.72,4.6,0,2.88,3,4,6,5.11,3.91,1.49,8.24,2.78,8.24,7.7,0,3.8-3,7.11-8.51,7.11A14.39,14.39,0,0,1,280.3,117.45Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M74,70.68C74,27.21,29.57,0,29.57,0a121.75,121.75,0,0,1-9,30.61C13.35,46.77,0,57.83,0,76.72c0,24.43,17.1,44.22,37.18,44.22S74,98.27,74,70.68Z"
+          style="fill:#db3a34"
+        ></path>
+        <path
+          d="M67.14,78.6C67.14,42,31,19.07,31,19.07a105.49,105.49,0,0,1-7.34,25.78C17.74,58.46,6.86,67.78,6.86,83.7c0,20.57,13.93,37.24,30.29,37.24S67.14,101.84,67.14,78.6Z"
+          style="fill:#f7931e"
+        ></path>
+        <path
+          d="M57.92,88.46c0-28.09-25.12-45.67-25.12-45.67a87.16,87.16,0,0,1-5.1,19.78C23.63,73,16.08,80.16,16.08,92.37c0,15.78,9.67,28.57,21,28.57S57.92,106.29,57.92,88.46Z"
+          style="fill:#ffc857"
+        ></path>
+        <path
+          d="M47.44,104.74c0-14-12.53-22.77-12.53-22.77a43.35,43.35,0,0,1-2.55,9.86c-2,5.21-5.79,8.77-5.79,14.86,0,7.87,4.82,14.25,10.48,14.25S47.44,113.64,47.44,104.74Z"
+          style="fill:#fff"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;
+
+export default {
+  title: 'Menu',
+  component: 'pd-menu',
+  argTypes: {
+    menuColor: { control: 'color' },
+  },
+};
+
+function Template({ menuItems, topMenuItems, color, logo, menuColor }) {
+  return html`
+    <pd-menu
+      style="
+              --squi-menu-bg-color: ${menuColor || color};
+              transition: background-color 1s;"
+      .logo="${logo ? { svg: logo } : undefined}"
+      .menuItems=${menuItems}
+      .topMenuItems=${topMenuItems}
+      ?teaserClosed="${true}"
+    >
+    </pd-menu>
+  `;
+}
+
+export const BasicColor1 = Template.bind({});
+BasicColor1.args = {
+  menuItems: [
+    { name: 'Service', sec: 'secServices' },
+    { name: 'Over ons', sec: 'secAboutUs' },
+    { name: 'Contact', sec: 'secContactUs' },
+  ],
+  topMenuItems: [],
+  color: '#177e89',
+};
+
+export const BasicColor2 = Template.bind({});
+BasicColor2.args = {
+  menuItems: [
+    { name: 'Service', sec: 'secServices' },
+    { name: 'Over ons', sec: 'secAboutUs' },
+    { name: 'Contact', sec: 'secContactUs' },
+  ],
+  topMenuItems: [],
+  color: '#084c61',
+};
+
+// with logo
+export const WithLogo = Template.bind({});
+WithLogo.args = {
+  menuItems: [
+    { name: 'Service', sec: 'secServices' },
+    { name: 'Over ons', sec: 'secAboutUs' },
+    { name: 'Contact', sec: 'secContactUs' },
+  ],
+  topMenuItems: [],
+  color: '#084c61',
+  logo: ticomiLogo,
+};
+
+// with top items
+export const WithTopItems = Template.bind({});
+WithTopItems.args = {
+  menuItems: [
+    { name: 'Service', sec: 'secServices' },
+    { name: 'Over ons', sec: 'secAboutUs' },
+    { name: 'Contact', sec: 'secContactUs' },
+  ],
+  topMenuItems: [{ name: 'Profile', icon: 'userIcon', sec: 'secServices' }],
+  color: '#084c61',
+  logo: ticomiLogo,
+};

package/stories/teaser.stories.js

@@ -0,0 +1,41 @@
+import { html } from 'lit';
+import '../pd-teaser.js';
+
+export default {
+  title: 'Teaser',
+  component: 'pd-teaser',
+  argTypes: {},
+};
+
+function Template() {
+  return html`
+    <pd-teaser
+      .teaserObjects="${[{ name: 't1' }, { name: 't2' }, { name: 't3' }]}"
+    >
+      <pd-teaser-content
+        slot="t1"
+        primaryTxt="Boek nu uw goedkoopste serviceafspraak."
+        secondaryTxt="Lage kosten met snelle reactietijden."
+        style="--squi-teaser-image: url('/images/hero_1.svg');"
+      >
+      </pd-teaser-content>
+      <pd-teaser-content
+        slot="t2"
+        primaryTxt="Professionele service voor uw verwarmingssysteem."
+        secondaryTxt="Ons ervaren team helpt u graag verder."
+        style="--squi-teaser-image: url('/images/hero_2.svg');"
+      >
+      </pd-teaser-content>
+      <pd-teaser-content
+        slot="t3"
+        primaryTxt="Wij bieden u verschillende serviceniveaus en individuele oplossingen."
+        secondaryTxt="Warmte en comfort met veiligheid."
+        style="--squi-teaser-image: url('/images/hero_3.svg');"
+      >
+      </pd-teaser-content>
+    </pd-teaser>
+  `;
+}
+
+export const Teaser = Template.bind({});
+Teaser.args = {};

package/test/pd-page.test.js

@@ -1,31 +1,31 @@
 import { html } from 'lit';
 import { fixture, expect } from '@open-wc/testing';
 
-import '../pd-page.js';
+import '../pd-menu.js';
 
-describe('PdPage', () => {
+describe('PdMenu', () => {
   it('has a default title "Hey there" and counter 5', async () => {
-    const el = await fixture(html`<pd-page></pd-page>`);
+    const el = await fixture(html`<pd-menu></pd-menu>`);
 
     expect(el.title).to.equal('Hey there');
     expect(el.counter).to.equal(5);
   });
 
   it('increases the counter on button click', async () => {
-    const el = await fixture(html`<pd-page></pd-page>`);
+    const el = await fixture(html`<pd-menu></pd-menu>`);
     el.shadowRoot.querySelector('button').click();
 
     expect(el.counter).to.equal(6);
   });
 
   it('can override the title via attribute', async () => {
-    const el = await fixture(html`<pd-page title="attribute title"></pd-page>`);
+    const el = await fixture(html`<pd-menu title="attribute title"></pd-menu>`);
 
     expect(el.title).to.equal('attribute title');
   });
 
   it('passes the a11y audit', async () => {
-    const el = await fixture(html`<pd-page></pd-page>`);
+    const el = await fixture(html`<pd-menu></pd-menu>`);
 
     await expect(el).shadowDom.to.be.accessible();
   });