@progressive-development/pd-page 0.0.12 → 0.0.14

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.12",
+  "version": "0.0.14",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdMenu.js

@@ -89,6 +89,11 @@ export class PdMenu extends LitElement {
         margin-top: -15px;
       }
 
+      ::slotted(.logo) {
+        max-width: 8rem;
+        width: 8rem; /* wird sonst im Chrome nicht angezeigt*/
+      }
+
       /* Size Elements for small width */
       @media (max-width: 440px) {
         .changevis {
@@ -195,13 +200,13 @@ export class PdMenu extends LitElement {
   _menuItemClicked(e) {
     const secParam = e.target.dataset.sec;
     const routeParam = e.target.dataset.route;
-    if (secParam !== 'undefined') {
+    if (secParam !== 'undefined' && secParam !== '') {
       this._scrollToContent(secParam);
-    } else if (routeParam !== 'undefined') {
+    } else if (routeParam !== 'undefined' && routeParam !== '') {
       this.dispatchEvent(
         new CustomEvent('route-event', {
           detail: {
-            route: routeParam,
+            route: routeParam === 'back' ? '' : routeParam,
           },
         })
       );

package/stories/contactUs.stories.js

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+import '../pd-contact-us.js';
+
+export default {
+  title: 'PdPage/Contact Us',
+  component: 'pd-contact-us',
+  argTypes: {},
+};
+
+function Template() {
+  return html`
+    <pd-contact-us
+      id="contactUsId"
+      .contact="${{
+        companyName: 'Ticomi BV',
+        street: 'Gaston Crommenlaan',
+        streetNr: '8',
+        city: 'Gent',
+        zip: '9050',
+        btw: 'BE 0743868155 / RPR Gent',
+
+        kbc: 'BE3487 43545 94858 45686',
+      }}"
+    >
+    </pd-contact-us>
+  `;
+}
+
+export const ContactUs = Template.bind({});
+ContactUs.args = {};

package/stories/footer.stories.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+import '../pd-footer.js';
+
+export default {
+  title: 'PdPage/Footer',
+  component: 'pd-footer',
+  argTypes: {},
+};
+
+function Template() {
+  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>
+  `;
+}
+
+export const Footer = Template.bind({});
+Footer.args = {};

package/stories/index.stories.js

@@ -1,44 +1,172 @@
 import { html } from 'lit';
+
+import '../pd-teaser.js';
 import '../pd-menu.js';
+import '../pd-contact-us.js';
+import '../pd-footer.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: 'PdMenu',
-  component: 'pd-menu',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
-  },
+  title: 'Page Examples',
+  component: 'pd-page',
+  argTypes: {},
 };
 
-function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
+function Template({ menuItems, topMenuItems, teaserClosed }) {
   return html`
-    <pd-menu
-      style="--pd-page-text-color: ${textColor || 'black'}"
-      .title=${title}
-      .counter=${counter}
-    >
-      ${slot}
-    </pd-menu>
+    <header>
+      <pd-teaser
+        .teaserObjects="${[{ name: 't1' }, { name: 't2' }, { name: 't3' }]}"
+        @close-teaser="${this._closeTeaser}"
+      >
+        <pd-teaser-content
+          slot="t1"
+          primaryTxt="Teaser 1 Primary Text"
+          secondaryTxt="Teaser 1 Secondary Text."
+        >
+        </pd-teaser-content>
+        <pd-teaser-content
+          slot="t2"
+          primaryTxt="Teaser 2 Primary Text"
+          secondaryTxt="Teaser 2 Secondary Text."
+          style="--squi-teaser-image: url('/images/hero_3.svg');"
+        >
+        </pd-teaser-content>
+        <pd-teaser-content
+          slot="t3"
+          primaryTxt="Teaser 3 Primary Text"
+          secondaryTxt="Teaser 3 Secondary Text."
+          style="--squi-teaser-image: url('/images/hero_2.svg');"
+        >
+        </pd-teaser-content>
+      </pd-teaser>
+
+      <pd-menu
+        class="${this._teaserClosed ? 'menu-2' : 'menu-1'}"
+        .menuItems=${menuItems}
+        .topMenuItems=${topMenuItems}
+        ?teaserClosed="${teaserClosed}"
+        @route-event="${this._routeEvent}"
+      >
+        <span slot="slotLogo" class="logo">${ticomiLogo}</span>
+      </pd-menu>
+
+      <section id="secServices">
+        <h1>Section 1</h1>
+        <p>Hier steht dann etwas Text</p>
+      </section>
+
+      <section id="secAboutUs">
+        <h1>Section 2</h1>
+        <p>Hier steht dann etwas Text</p>
+      </section>
+
+      <section id="secContactUs">
+        <pd-contact-us
+          id="contactUsId"
+          .contact="${{
+            companyName: 'Ticomi BV',
+            street: 'Gaston Crommenlaan',
+            streetNr: '8',
+            city: 'Gent',
+            zip: '9050',
+            btw: 'BE 0743868155 / RPR Gent',
+
+            kbc: 'BE3487 43545 94858 45686',
+          }}"
+        ></pd-contact-us>
+      </section>
+
+      <footer>
+        <pd-footer version="0.1 Test">
+          <span slot="legal"><p>My AGB</p></span>
+          <span slot="privacy"><p>My Privacy</p></span>
+        </pd-footer>
+      </footer>
+    </header>
   `;
 }
 
-export const Regular = Template.bind({});
-
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
+export const PageExamples = Template.bind({});
+PageExamples.args = {
+  menuItems: [
+    { name: 'Service', sec: 'secServices' },
+    { name: 'Over ons', sec: 'secAboutUs' },
+    { name: 'Contact', sec: 'secContactUs' },
+  ],
 
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
+  topMenuItems: [{ name: 'Profiel', icon: 'userIcon', route: 'profile' }],
 
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
+  teaserClosed: false,
 };

package/stories/menu.stories.js

@@ -75,7 +75,7 @@ const ticomiLogo = html`
 `;
 
 export default {
-  title: 'Menu',
+  title: 'PdPage/Menu',
   component: 'pd-menu',
   argTypes: {
     menuColor: { control: 'color' },
@@ -85,14 +85,18 @@ export default {
 function Template({ menuItems, topMenuItems, color, logo, menuColor }) {
   return html`
     <pd-menu
-      style="
-              --squi-menu-bg-color: ${menuColor || color};
+      style="--squi-menu-bg-color: ${menuColor || color};
               transition: background-color 1s;"
-      .logo="${logo ? { svg: logo } : undefined}"
       .menuItems=${menuItems}
       .topMenuItems=${topMenuItems}
       ?teaserClosed="${true}"
+      @route-event="${e => {
+        console.log('Der route event ist da: ', e);
+      }}"
     >
+      ${logo
+        ? html`<span slot="slotLogo" class="logo">${ticomiLogo}</span>`
+        : ''}
     </pd-menu>
   `;
 }
@@ -140,7 +144,7 @@ WithTopItems.args = {
     { name: 'Over ons', sec: 'secAboutUs' },
     { name: 'Contact', sec: 'secContactUs' },
   ],
-  topMenuItems: [{ name: 'Profile', icon: 'userIcon', sec: 'secServices' }],
+  topMenuItems: [{ name: 'Profile', icon: 'userIcon', route: 'profile' }],
   color: '#084c61',
   logo: ticomiLogo,
 };

package/stories/teaser.stories.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import '../pd-teaser.js';
 
 export default {
-  title: 'Teaser',
+  title: 'PdPage/Teaser',
   component: 'pd-teaser',
   argTypes: {},
 };