npm - @progressive-development/pd-page - Versions diffs - 0.0.1 - Mend

@progressive-development/pd-page 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/.editorconfig +29 -0
package/.storybook/main.js +3 -0
package/.storybook/server.mjs +8 -0
package/LICENSE +2 -0
package/README.md +76 -0
package/demo/index.html +29 -0
package/index.js +1 -0
package/package.json +69 -0
package/pd-contact-us.js +3 -0
package/pd-footer.js +3 -0
package/pd-menu.js +3 -0
package/pd-teaser.js +5 -0
package/src/PdContactUs.js +267 -0
package/src/PdFooter.js +186 -0
package/src/PdMenu.js +244 -0
package/src/PdTeaser.js +272 -0
package/src/PdTeaserContent.js +216 -0
package/stories/index.stories.js +44 -0
package/test/pd-page.test.js +32 -0
package/web-dev-server.config.mjs +27 -0
package/web-test-runner.config.mjs +41 -0

package/.editorconfig ADDED Viewed

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+root = true
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+[*.md]
+trim_trailing_whitespace = false
+[*.json]
+indent_size = 2
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.storybook/main.js ADDED Viewed

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.{js,md,mdx}'],
+};

package/.storybook/server.mjs ADDED Viewed

@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  ...baseConfig,
+  open: '/',
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});

package/LICENSE ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ No License, all rights reserved
2	+ @2021 - PD Progressive Development UG

package/README.md ADDED Viewed

@@ -0,0 +1,76 @@
+# \<pd-page>
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+## Installation
+```bash
+npm i pd-page
+```
+## Usage
+```html
+<script type="module">
+  import 'pd-page/pd-page.js';
+</script>
+<pd-page></pd-page>
+```
+## Linting and formatting
+To scan the project for linting and formatting errors, run
+```bash
+npm run lint
+```
+To automatically fix linting and formatting errors, run
+```bash
+npm run format
+```
+## Testing with Web Test Runner
+To execute a single test run:
+```bash
+npm run test
+```
+To run the tests in interactive watch mode run:
+```bash
+npm run test:watch
+```
+## Demoing with Storybook
+To run a local instance of Storybook for your component, run
+```bash
+npm run storybook
+```
+To build a production version of Storybook, run
+```bash
+npm run storybook:build
+```
+## Tooling configs
+For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
+If you customize the configuration a lot, you can consider moving them to individual files.
+## Local Demo with `web-dev-server`
+```bash
+npm start
+```
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+  <div id="demo"></div>
+  <script type="module">
+    import { html, render } from 'lit';
+    import '../pd-page.js';
+    const title = 'Hello owc World!';
+    render(
+      html`
+        <pd-page .title=${title}>
+          some light-dom
+        </pd-page>
+      `,
+      document.querySelector('#demo')
+    );
+  </script>
+</body>
+</html>

package/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { PdPage } from './src/PdPage.js';

package/package.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "name": "@progressive-development/pd-page",
+  "description": "Progressive development page helper, teaser, menu, footer.",
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "PD Progressive Development",
+  "version": "0.0.1",
+  "main": "index.js",
+  "module": "index.js",
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "web-dev-server",
+    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "test": "web-test-runner --coverage",
+    "test:watch": "web-test-runner --watch",
+    "storybook": "npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs",
+    "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
+  },
+  "dependencies": {
+    "lit": "^2.0.2",
+    "@progressive-development/pd-contact": "0.0.2",
+    "@progressive-development/pd-forms": "0.0.13",
+    "@progressive-development/pd-dialog": "0.0.7",
+    "@progressive-development/pd-icon": "0.0.4"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "next",
+    "@web/dev-server": "^0.1.25",
+    "@web/dev-server-storybook": "next",
+    "@web/test-runner": "^0.13.20",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "keywords": [
+    "pd",
+    "progressive",
+    "development",
+    "menu",
+    "footer",
+    "teaser"
+  ]
+}

package/pd-contact-us.js ADDED Viewed

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

package/pd-footer.js ADDED Viewed

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

package/pd-menu.js ADDED Viewed

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

package/pd-teaser.js ADDED Viewed

@@ -0,0 +1,5 @@
+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);

package/src/PdContactUs.js ADDED Viewed

@@ -0,0 +1,267 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+import { LitElement, html, css } from 'lit';
+import '@progressive-development/pd-forms/PdButton.js';
+import '@progressive-development/pd-forms/PdFormContainer.js';
+import '@progressive-development/pd-forms/PdFormRow.js';
+import '@progressive-development/pd-forms/PdInput.js';
+import '@progressive-development/pd-forms/PdInputArea.js';
+import '@progressive-development/pd-contact/pd-contact.js';
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdContactUs extends LitElement {
+  /**
+   * Fired when free date clicked => At the moment only for freeDates
+   * @event send-contact-request
+   */
+  static get styles() {
+    return css`
+      :host {
+        --my-background-color: var(--squi-test, #177e89);
+        --my-text-color: var(--squi-test, white);
+        --my-background-img: var(
+          --squi-bg-image,
+          url('/images/contact_bg.svg')
+        );
+        display: flex;
+        flex-flow: row;
+        background-color: var(--my-background-color);
+        background-image: var(--my-background-img);
+        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;
+        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;
+      }
+      .content-block {
+        display: flex;
+        flex-direction: column;
+        align-items: left;
+        justify-content: flex-start;
+        flex-grow: 1;
+        max-width: 1170px;
+        margin: 0 auto;
+        text-align: left;
+        padding-left: 10px;
+      }
+      .contact-block {
+        display: flex;
+        flex-wrap: wrap;
+        padding-bottom: 50px;
+      }
+      .left-content {
+        width: 30%;
+        min-width: 230px;
+      }
+      .right-content {
+        width: 70%;
+      }
+      .company-contact {
+        --squi-addrress-txt-color: #fefefe;
+      }
+      /* Size Elements for small width */
+      @media (max-width: 440px) {
+        .item {
+          display: none;
+        }
+        ul {
+          justify-content: left;
+        }
+      }
+    `;
+  }
+  static get properties() {
+    return {
+      contact: { type: Object },
+      _errorMap: { type: Object },
+    };
+  }
+  constructor() {
+    super();
+    this.contact = {};
+    this._errorMap = new Map();
+  }
+  firstUpdated() {
+    this.addEventListener('key-pressed', e => {
+      this._errorMap.set(e.detail.name, '');
+      super.requestUpdate();
+    });
+  }
+  render() {
+    return html`
+      <div class="content-block">
+        <h2>Contacteer ons</h2>
+        <div class="contact-block">
+          <div class="left-content">
+            <pd-contact
+              class="company-contact"
+              .contact="${this.contact}"
+              summary
+            ></pd-contact>
+          </div>
+          <div class="right-content">
+            <squi-form-container>
+              <squi-form-row>
+                <squi-input
+                  id="nameInputId"
+                  class="quarter3"
+                  placeHolder="Naam"
+                  valueName="name"
+                  errorMsg="${this._getErrorMsg('name')}"
+                ></squi-input>
+              </squi-form-row>
+              <squi-form-row>
+                <squi-input
+                  id="mailInputId"
+                  class="quarter3"
+                  placeHolder="Email"
+                  valueName="mail"
+                  errorMsg="${this._getErrorMsg('mail')}"
+                ></squi-input>
+              </squi-form-row>
+              <squi-form-row>
+                <squi-input
+                  id="phoneInputId"
+                  class="quarter3"
+                  placeHolder="Telefoon Nummer"
+                  valueName="phone"
+                  errorMsg="${this._getErrorMsg('phone')}"
+                ></squi-input>
+              </squi-form-row>
+              <squi-form-row>
+                <squi-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>
+            <squi-button
+              text="Verzenden"
+              @click="${this._sendMail}"
+            ></squi-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  clear() {
+    this.shadowRoot.getElementById('nameInputId').clear();
+    this.shadowRoot.getElementById('mailInputId').clear();
+    this.shadowRoot.getElementById('phoneInputId').clear();
+    this.shadowRoot.getElementById('msgInputId').clear();
+  }
+  _sendMail() {
+    // get inpus
+    const name = this.shadowRoot.getElementById('nameInputId').value;
+    const email = this.shadowRoot.getElementById('mailInputId').value;
+    const phone = this.shadowRoot.getElementById('phoneInputId').value;
+    const msg = this.shadowRoot.getElementById('msgInputId').value;
+    const newErrorMap = new Map();
+    if (!name || name === '') {
+      newErrorMap.set('name', 'Verplicht veld');
+    }
+    if (!email || email === '') {
+      newErrorMap.set('mail', 'Verplicht veld');
+    } else if (!PdContactUs._mailIsValid(email)) {
+      newErrorMap.set('mail', 'Invalid address');
+    }
+    if (!phone || phone === '') {
+      newErrorMap.set('phone', 'Verplicht veld');
+    } else if (!PdContactUs._phoneIsValid(phone)) {
+      newErrorMap.set('phone', 'Invalid phone number');
+    }
+    if (!msg || msg === '') {
+      newErrorMap.set('msg', 'Verplicht veld');
+    }
+    this._errorMap = newErrorMap;
+    if (newErrorMap.size === 0) {
+      this.dispatchEvent(
+        new CustomEvent('send-contact-request', {
+          detail: {
+            msgObj: { name, email, phone, msg },
+          },
+        })
+      );
+    }
+  }
+  _getErrorMsg(itemId) {
+    return this._errorMap.get(itemId) || '';
+  }
+  static _mailIsValid(email) {
+    const mValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    return mValid;
+  }
+  static _phoneIsValid(phone) {
+    // Valid +49 830 9001 | 49 221 123 | 08912379
+    const mValid = /^\+?[0-9 ]{7,15}$/.test(phone);
+    return mValid;
+  }
+}

package/src/PdFooter.js ADDED Viewed

@@ -0,0 +1,186 @@
+/* eslint-disable lit-a11y/anchor-is-valid */
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+import { LitElement, html, css } from 'lit';
+import '@progressive-development/pd-dialog/pd-popup.js';
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdFooter extends LitElement {
+  /**
+   * Fired when free date clicked => At the moment only for freeDates
+   * @event book-date
+   */
+  static get styles() {
+    return 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-background: var(--squi-teaser-image, url('/images/hero_1.svg'));
+        --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);
+        width: 100%;
+      }
+      h1,
+      h2,
+      h3,
+      h4 {
+        font-family: var(--my-primary-font, 'Oswald');
+        font-style: normal;
+        margin: 0;
+        padding: 0;
+      }
+      .left-content {
+        width: 50%;
+        padding-left: 30px;
+        align-self: flex-end;
+        height: calc(var(--my-height) / 1.4);
+      }
+      .right-content {
+        width: 50%;
+        padding-right: 30px;
+      }
+      .right-content ul {
+        display: flex;
+        justify-content: flex-end;
+        list-style: none;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        height: 100%;
+      }
+      .right-content li {
+        display: flex;
+        align-items: center;
+        padding: 0rem 1rem;
+        height: 100%;
+      }
+      .item,
+      .right-content p,
+      .left-content p {
+        color: #2bcadb;
+        font-size: 1.1rem;
+      }
+      .version {
+        color: #9fbdc0;
+        font-style: italic;
+        font-size: 0.9rem;
+      }
+      .item a:hover {
+        color: #ffc857;
+        cursor: pointer;
+        /*border-bottom: 1px solid #ffc857;*/
+      }
+      .logo {
+        max-width: 6rem;
+        padding-right: 10px;
+      }
+      /* Size Elements for small width */
+      @media (max-width: 440px) {
+        .item {
+          display: none;
+        }
+        ul {
+          justify-content: left;
+        }
+      }
+    `;
+  }
+  static get properties() {
+    return {
+      logo: { type: Object },
+      agb: { type: Object },
+      privacy: { type: Object },
+      version: { type: Object },
+    };
+  }
+  constructor() {
+    super();
+    this.logo = undefined;
+    this.agb = undefined;
+    this.privacy = undefined;
+    this.version = undefined;
+  }
+  firstUpdated() {}
+  render() {
+    return html`
+      <div class="left-content">
+        <p>
+          © ticomi technics ${this.logo} <br /><span class="version"
+            >${this.version}</span
+          >
+        </p>
+      </div>
+      <div class="right-content">
+        <ul>
+          <li class="item">
+            <a
+              @keypress="${() => {
+                console.log();
+              }}"
+              @click="${this._legalClicked}"
+              >Verkoopvoorwaarden</a
+            >
+          </li>
+          <li class="item">
+            <a
+              @keypress="${() => {
+                console.log();
+              }}"
+              @click="${this._policyClicked}"
+              >Privacy</a
+            >
+          </li>
+        </ul>
+      </div>
+      <pd-popup id="legalPopupId">
+        <div slot="content">${this.agb}</div>
+      </pd-popup>
+      <pd-popup id="privacyPopupId">
+        <div slot="content">${this.privacy}</div>
+      </pd-popup>
+    `;
+  }
+  _legalClicked() {
+    this.shadowRoot.getElementById('legalPopupId').showPopup();
+  }
+  _policyClicked() {
+    this.shadowRoot.getElementById('privacyPopupId').showPopup();
+  }
+}