@progressive-development/pd-page 0.1.95 → 0.1.97

package/.storybook/main.js

@@ -1,3 +1,13 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.{js,md,mdx}'],
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
 };
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

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.1.95",
+  "version": "0.1.97",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -13,10 +13,10 @@
     "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",
     "localizeExtract": "lit-localize extract",
-    "localizeBuild": "lit-localize build"
+    "localizeBuild": "lit-localize build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@lit/localize": "^0.11.4",
@@ -33,20 +33,29 @@
     "@lit/localize-tools": "^0.6.10",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "^3.0.0-next.5",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/web-components": "^7.5.3",
+    "@storybook/web-components-vite": "^7.5.3",
     "@web/dev-server": "^0.1.38",
-    "@web/dev-server-storybook": "^0.3.7-next.0",
     "@web/test-runner": "^0.13.31",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8"
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.5.3"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
     "extends": [
       "@open-wc",
-      "prettier"
+      "prettier",
+      "plugin:storybook/recommended"
     ]
   },
   "prettier": {

package/src/PdMenu.js

@@ -6,7 +6,8 @@
 
 import { LitElement, html, css } from 'lit';
 import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
-import { ICON_TOOGLE_ARROW as burgerIcon } from '@progressive-development/pd-icon/src/PdIcon.js';
+import { ICON_TOOGLE_ARROW as toggleArrow } from '@progressive-development/pd-icon/src/PdIcon.js';
+import { ICON_BURGER_MENU as burgerIcon } from '@progressive-development/pd-icon/src/PdIcon.js';
 import '@progressive-development/pd-icon/pd-icon.js';
 import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
 
@@ -65,9 +66,11 @@ export class PdMenu extends LitElement {
 
       .burger-ul {
         visibility: hidden;
+        overflow: hidden;
+        z-index: -1;
         position: absolute;
         flex-direction: column;
-        top: var(--pd-menu-burger-top, var(--pd-menu-height, 100px));
+        top: calc(var(--pd-menu-height, 100px) * -1);
         right: 0px;
         background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
         
@@ -77,11 +80,49 @@ export class PdMenu extends LitElement {
         width:100%;
         -moz-border-radius: var(--pd-border-radius);
         border-radius: var(--pd-border-radius);
+
+        transition: 0.5s;
+        transition-timing-function: ease-out;
+  
+        transform: translateY(0);
+        opacity: 0;
       }
 
+      .locale-ul {
+        visibility: hidden;
+        position: absolute;
+        flex-direction: column;
+        top: 10px;
+        right: 15px;
+        background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
+        
+        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);    
+        border-bottom: var(--pd-menu-burger-bottomborder);
+        padding: var(--pd-menu-burger-padding, 0);
+        -moz-border-radius: var(--pd-border-radius);
+        border-radius: var(--pd-border-radius);
+
+        transition: 0.5s;
+        transition-timing-function: ease-out;
+  
+        transform: translateY(0);
+        opacity: 0;
+      }      
+
       :host([_activeBurgerMenu]) .burger-ul {
-          visibility: visible;
-      }       
+          visibility: visible; 
+          opacity: 1;
+          top: var(--pd-menu-burger-top, var(--pd-menu-height, 100px));         
+          transition-timing-function: ease-in;
+      }    
+      
+      
+      :host([_activeLocaleMenu]) .locale-ul {
+          visibility: visible; 
+          opacity: 1;
+          top: 40px;
+          transition-timing-function: ease-in;
+      } 
 
       .menu-li {
         display: flex;
@@ -98,6 +139,10 @@ export class PdMenu extends LitElement {
         height:1rem;
       }
 
+      .locale-li {
+        position: relative;        
+      }
+
       .burger-li:hover {
           background-color: var(--pd-default-dark-col);
         }
@@ -114,6 +159,10 @@ export class PdMenu extends LitElement {
         color: var(--pd-menu-burger-font-col, var(--pd-default-dark-col));
       }
 
+      .locale-item {
+        padding-left: 1.5em;
+      }
+
       .item.active,
       .item:hover {
         color: var(--pd-default-hover-col);
@@ -135,21 +184,32 @@ export class PdMenu extends LitElement {
 
       .burger-menu {
           display: flex;
+          gap: 0.3rem;
           width: 100%;
-          justify-content: start
+          justify-content: end;
+          align-items: center;
+      }
+
+      .burger-menu .item{
+          padding: 0;
+          font-size: 1.5em;
       }
 
       .topItemLogo {
         --pd-icon-size: 1.4rem;
-        /* TODO: noch vars übernehmen
-        --pd-icon-bg-col: var(--pd-menu-bg-col, var(--pd-default-col));
-        --pd-icon-col: var(--pd-menu-bg-col, var(--pd-default-dark-col));
+        --pd-icon-bg-col: transparent;   
         --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
-        */
+        --pd-icon-col: var(--pd-menu-font-col, var(--pd-default-bg-col));        
+        pointer-events: none;
+      }               
 
+      .burgerLogo {
+        --pd-icon-size: 2rem;        
         --pd-icon-bg-col: transparent;   
         --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
-        --pd-icon-col: var(--pd-menu-font-col, var(--pd-default-bg-col));        
+        --pd-icon-col: var(--pd-default-hover-col);        
+        --pd-icon-stroke-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-col-active: lightgrey;
         pointer-events: none;
       }               
 
@@ -168,10 +228,11 @@ export class PdMenu extends LitElement {
       .locale-selection-logo {
         --pd-icon-size: 0.8rem;
         --pd-icon-bg-col: transparent;
-        --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));;
-        --pd-icon-col: var(--pd-menu-font-col, var(--pd-default-bg-col));;
-        --pd-icon-stroke-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));;
-        --pd-icon-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));;
+        --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-col: var(--pd-default-hover-col);
+        --pd-icon-stroke-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        margin-top: 2px;
         pointer-events: none;
       }
           
@@ -257,15 +318,25 @@ export class PdMenu extends LitElement {
           ${this._renderItems(this.topMenuItems, false)}
           
           ${(this.locales && this.locales.length) > 1 ? html`
-            <li class="item menu-li" @click="${this._toggleLocaleSelection}">
+            <li class="item menu-li locale-li" @click="${this._toggleLocaleSelection}">
               ${this.selectedLocale}
-              <pd-icon class="locale-selection-logo" icon="${burgerIcon}" ?activeIcon="${!this._activeLocaleMenu}"></pd-icon>
+              <pd-icon class="locale-selection-logo" icon="${toggleArrow}" ?activeIcon="${!this._activeLocaleMenu}"></pd-icon>
+              <ul class="menu-ul locale-ul">
+                ${this.locales.map(locale => html`
+                <li class="item menu-li burger-li burger-item locale-item"
+                  data-key="${locale}"
+                  @click="${this._localeClicked}"
+                >
+                  ${locale}
+                </li>
+                `)}                
+              </ul>
             </li>
           ` : ''}
         </ul>
       ` : html`
         <div class="burger-menu" @click="${this._toggleBurgerMenu}">
-          <pd-icon class="round" icon="${burgerIcon}" ?activeIcon="${!this._activeBurgerMenu}"></pd-icon>          
+          <pd-icon class="burgerLogo" icon="${burgerIcon}" ?activeIcon="${!this._activeBurgerMenu}"></pd-icon>          
           <span class="item">Menu</span>
         </div>
       `}

package/{stories → src/stories}/01_index.stories.js

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 
-import '../pd-teaser.js';
-import '../pd-menu.js';
-import '../pd-contact-us.js';
-import '../pd-footer.js';
+import '../../pd-teaser.js';
+import '../../pd-menu.js';
+import '../../pd-contact-us.js';
+import '../../pd-footer.js';
 
 const ticomiLogo = html`
   <svg

package/{stories → src/stories}/contactUs.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../pd-contact-us.js';
+import '../../pd-contact-us.js';
 
 export default {
   title: 'PdPage/Contact Us',

package/{stories → src/stories}/footer.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../pd-footer.js';
+import '../../pd-footer.js';
 
 export default {
   title: 'PdPage/Footer',

package/{stories → src/stories}/menu.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 
-import '../pd-menu.js';
+import '../../pd-menu.js';
 
 const ticomiLogo = html`
   <svg
@@ -82,11 +82,12 @@ export default {
   },
 };
 
-function Template({ menuItems, topMenuItems, color, logo, menuColor, locales, selectedLocale, noBurger }) {
+function Template({ menuItems, topMenuItems, color, logo, menuColor, locales, selectedLocale, noBurger, menuHeight }) {
   return html`
     <pd-menu
-      style="--squi-menu-bg-color: ${menuColor || color};
-              transition: background-color 1s;"
+      style="--pd-menu-bg-col: ${menuColor || color};
+             --pd-menu-height: ${menuHeight || 160}px;
+             transition: background-color 1s;"
       .menuItems=${menuItems}
       .topMenuItems=${topMenuItems}
       ?teaserClosed="${true}"
@@ -169,3 +170,19 @@ WithoutBurger.args = {
   selectedLocale: "de",
   noBurger: true
 };
+
+// with top items
+export const SmallTopMenuWitoutBurger = Template.bind({});
+SmallTopMenuWitoutBurger.args = {
+  menuItems: [],
+  topMenuItems: [
+    { name: 'Preise', route: 'prices' },
+    { name: 'AGB', route: 'agb' },
+    { name: 'Profile', icon: 'userIcon', route: 'profile' }
+  ],
+  color: '#084c61',
+  locales: ["de", "en"],
+  selectedLocale: "de",
+  menuHeight: 50,
+  noBurger: true
+};

package/{stories → src/stories}/teaser.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../pd-teaser.js';
+import '../../pd-teaser.js';
 
 export default {
   title: 'PdPage/Teaser',

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-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],
-});