@progressive-development/pd-page 0.0.23 → 0.0.25

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.23",
+  "version": "0.0.25",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
     "lit": "^2.0.2",
     "@progressive-development/pd-contact": "^0.0.8",
     "@progressive-development/pd-forms": "^0.0.18",
-    "@progressive-development/pd-dialog": "^0.0.13",
+    "@progressive-development/pd-dialog": "^0.0.14",
     "@progressive-development/pd-icon": "^0.0.9"
   },
   "devDependencies": {

package/src/PdFooter.js

@@ -18,7 +18,7 @@ import '@progressive-development/pd-dialog/pd-popup.js';
 export class PdFooter extends LitElement {
   /**
    * Fired when free date clicked => At the moment only for freeDates
-   * @event book-date
+   * @event show-policy
    */
 
   static get styles() {
@@ -165,6 +165,15 @@ export class PdFooter extends LitElement {
               >Privacy</a
             >
           </li>
+          <li class="item">
+            <a
+              @keypress="${() => {
+                console.log();
+              }}"
+              @click="${this._cookiePolicyClicked}"
+              >Cookies</a
+            >
+          </li>
         </ul>
       </div>
 
@@ -193,4 +202,12 @@ export class PdFooter extends LitElement {
   _policyClicked() {
     this.shadowRoot.getElementById('privacyPopupId').showPopup();
   }
+
+  _cookiePolicyClicked() {
+    this.dispatchEvent("show-policy", {
+      detail: {
+        policy: 'cookie'
+      }
+    })
+  }
 }

package/stories/teaser.stories.js

@@ -7,8 +7,8 @@ export default {
   argTypes: {},
 };
 
-function Template() {
-  return html`
+
+const getTeaser = () => html`
     <pd-teaser
       .teaserObjects="${[{ name: 't1' }, { name: 't2' }, { name: 't3' }]}"
     >
@@ -35,7 +35,41 @@ function Template() {
       </pd-teaser-content>
     </pd-teaser>
   `;
+
+function Template() {
+  return getTeaser();
+}
+
+function TemplateSmall() {
+  return html` 
+
+    <style>
+      .smallContent {
+
+        min-height: 100vh;
+        height: 100%;
+
+        max-width: 960px;
+        margin: 0 auto;
+        
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+
+        background-color: grey;
+      }
+    </style>
+
+    <div class="smallContent"> 
+      ${getTeaser()}
+    </div>
+  `;
 }
 
+
 export const Teaser = Template.bind({});
 Teaser.args = {};
+
+export const TeaserSmall = TemplateSmall.bind({});
+TeaserSmall.args = {};