@lion/ui 0.19.1 → 0.20.0-menu-system.0

package/docs/components/menu/applyMenuDemoStyles.js

@@ -0,0 +1,173 @@
+import { html, render } from 'lit';
+
+function renderLitAsNode(tpl) {
+  const container = document.createElement('div');
+  render(tpl, container);
+  return container.firstElementChild;
+}
+
+let isApplied = false;
+
+export function applyMenuDemoStyles() {
+  if (isApplied) {
+    return;
+  }
+
+  const fontAwesome = html`<link
+    rel="stylesheet"
+    href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+    integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
+    crossorigin="anonymous"
+  />`;
+  document.head.appendChild(renderLitAsNode(fontAwesome));
+
+  const styles = html` <style>
+    [role='menu']:focus {
+      outline: none;
+    }
+
+    [role='toolbar'],
+    [role='tree'],
+    [role='menubar'],
+    [role='menu'] {
+      background: white;
+      font-family: sans-serif;
+      font-size: 12px;
+    }
+
+    [level] > [role='menu'] {
+      border: 1px solid black;
+    }
+
+    [role='treeitem']:not([aria-expanded]),
+    [role='treeitem'][aria-expanded],
+    [role^='menuitem']:not([aria-expanded]),
+    [role^='menuitem'][aria-expanded] {
+      all: unset;
+      display: block;
+      width: 100%;
+      position: relative;
+      box-sizing: border-box;
+      padding: 4px 24px 4px 8px;
+    }
+
+    [role='treeitem']:not([aria-expanded]),
+    [role='treeitem'][aria-expanded] {
+      padding-left: 16px;
+    }
+
+    [role='treeitem'][active]:not([aria-expanded]),
+    [role='treeitem'][active][aria-expanded],
+    [role^='menuitem'][active]:not([aria-expanded]),
+    [role^='menuitem'][active][aria-expanded] {
+      background: lightgrey;
+    }
+
+    [role^='menuitem'][checked]:not([aria-expanded]),
+    [role^='menuitem'][checked][aria-expanded] {
+      background: #eee;
+    }
+
+    [role='treeitem'],
+    [role^='menuitem'] {
+      position: relative;
+      cursor: default;
+    }
+
+    [role='treeitem']::after,
+    [role^='menuitem']::after {
+      position: absolute;
+      top: 5px;
+      font-size: 10px;
+    }
+
+    [role^='menuitem']::after {
+      right: 4px;
+    }
+
+    [role^='treeitem']::after {
+      left: 4px;
+    }
+
+    [role^='menuitem'][aria-expanded]::after {
+      content: '▶';
+    }
+
+    [role^='menuitem'][aria-expanded='true']::after {
+      content: '▼';
+    }
+
+    [orientation='horizontal'] [role^='menuitem'][aria-expanded]::after {
+      content: '▼';
+    }
+
+    [role='menuitemcheckbox'][aria-checked='true']::after {
+      content: '🗹';
+    }
+
+    [role='menuitemradio'][aria-checked='true']::after {
+      content: '◉';
+    }
+
+    [role='separator'] {
+      border-bottom: 1px solid gray;
+    }
+
+    [role='treeitem'][aria-expanded]::after {
+      content: '+';
+    }
+
+    lion-tree[level='1'] [role='treeitem']:not([aria-expanded]),
+    lion-tree[level='1'] [role='treeitem'][aria-expanded] {
+      padding-left: 24px;
+    }
+
+    lion-menu[level='1'] [role^='menuitem']:not([aria-expanded]),
+    lion-menu[level='1'] [role^='menuitem'][aria-expanded] {
+      padding-left: 16px;
+    }
+
+    lion-tree[level='2'] [role='treeitem']:not([aria-expanded]),
+    lion-tree[level='2'] [role='treeitem'][aria-expanded] {
+      padding-left: 32px;
+    }
+    lion-menu[level='2'] [role^='menuitem']:not([aria-expanded]),
+    lion-menu[level='2'] [role^='menuitem'][aria-expanded] {
+      padding-left: 24px;
+    }
+
+    [role='toolbar'] {
+      padding: 8px;
+      background: #eee;
+    }
+    [role='toolbar'] button {
+      background: none;
+      padding: 4px 8px;
+      border: 1px transparent;
+    }
+    [role='toolbar'] button[aria-pressed='true'],
+    [role='toolbar'] button[aria-checked='true'] {
+      background: white;
+      border: 1px black;
+    }
+
+    [role='toolbar'] > div[role='separator'] {
+      margin-left: 8px;
+      margin-right: 8px;
+      border-left: 1px solid lightgray;
+    }
+
+    button[slot='invoker'] {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      display: block;
+      width: 100%;
+      text-align: left;
+    }
+  </style>`;
+  document.head.appendChild(renderLitAsNode(styles));
+  isApplied = true;
+}

package/docs/components/menu/extensions.md

@@ -0,0 +1,262 @@
+---
+title: 'Menu: Extensions'
+parts:
+  - Menu
+  - Extensions
+eleventyNavigation:
+  key: 'Menu: Extensions'
+  order: 10
+  parent: Menu
+  title: Extensions
+---
+
+# Menu: Extensions
+
+```js script
+import { html } from 'lit';
+import '@lion/ui/define/lion-navigation-bar.js';
+
+// N.B. data structure designed to be compatible with existing extension layer
+// TODO: maybe refactor api and bridge
+
+const menuData = [
+  {
+    title: 'Products',
+    link: 'products',
+    sub: [
+      {
+        title: 'Payments',
+        link: 'payments-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+      {
+        title: 'Savings',
+        link: 'savings-collection',
+        sub: [
+          { title: 'Liquidity & Cash Management', link: 'liquidity-cash-management' },
+          { title: 'Physcial Cash Management', link: 'physcial-cash-management' },
+          { title: 'Notional Cash Management', link: 'notional-cash-management' },
+          { title: 'Virtual Cash Management', link: 'virtual-cash-management' },
+          { title: 'Liquidity Management', link: 'liquidity-management' },
+          { title: 'Excess Cash', link: 'excess-cash' },
+        ],
+      },
+      {
+        title: 'Investing',
+        link: 'investing-collection',
+        sub: [
+          { title: 'Digital Banking Services', link: 'home' },
+          { title: 'InsideBusiness', link: 'home' },
+          { title: 'Connectivity Solutions', link: 'connectivity-solutions' },
+        ],
+      },
+      {
+        title: 'Mortgages',
+        link: 'mortgages-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+      {
+        title: 'Loans',
+        link: 'loans-collection',
+        sub: [
+          { title: 'Liquidity & Cash Management', link: 'liquidity-cash-management' },
+          { title: 'Physcial Cash Management', link: 'physcial-cash-management' },
+          { title: 'Notional Cash Management', link: 'notional-cash-management' },
+          { title: 'Virtual Cash Management', link: 'virtual-cash-management' },
+          { title: 'Liquidity Management', link: 'liquidity-management' },
+          { title: 'Excess Cash', link: 'excess-cash' },
+        ],
+      },
+      {
+        title: 'Insurances',
+        link: 'insurances-collection',
+        sub: [
+          { title: 'Digital Banking Services', link: 'home' },
+          { title: 'InsideBusiness', link: 'home' },
+          { title: 'Connectivity Solutions', link: 'connectivity-solutions' },
+        ],
+      },
+      {
+        title: 'Digital banking',
+        link: 'digital-banking',
+      },
+    ],
+  },
+  {
+    title: "Who it's for",
+    link: 'who',
+    sub: [
+      {
+        title: 'Parents & kids',
+        link: 'parents-kids',
+        sub: [
+          { title: 'Child current account', link: '#child-current' },
+          { title: 'Youth current account', link: '#youth-current' },
+          { title: 'Child savings account', link: '#child-savings' },
+        ],
+      },
+      {
+        title: 'Students',
+        link: 'students',
+        sub: [
+          { title: 'Student account', link: '#student-account' },
+          { title: 'Smart payments', link: '#smart-payments' },
+          { title: 'Smart savings', link: '#smart-savings' },
+          { title: 'Smart banking', link: '#smart-banking' },
+          { title: 'Smart for now', link: '#smart-for-now' },
+          { title: 'Smart for later', link: '#smart-for-later' },
+        ],
+      },
+      {
+        title: "I'm an expat",
+        link: 'expat',
+        sub: [
+          { title: 'Open a Dutch banking account', link: '#open' },
+          { title: 'Investments', link: '#investments' },
+          { title: 'Mortgage', link: '#mortgage' },
+          { title: 'Health insurance', link: '#insurance' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Themes',
+    link: 'themes',
+    sub: [
+      {
+        title: 'Living',
+        link: 'living-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+      {
+        title: 'Wealth',
+        link: 'wealth-collections',
+        sub: [
+          { title: 'Liquidity & Cash Management', link: 'liquidity-cash-management' },
+          { title: 'Physcial Cash Management', link: 'physcial-cash-management' },
+          { title: 'Notional Cash Management', link: 'notional-cash-management' },
+          { title: 'Virtual Cash Management', link: 'virtual-cash-management' },
+          { title: 'Liquidity Management', link: 'liquidity-management' },
+          { title: 'Excess Cash', link: 'excess-cash' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Loyalty shop',
+    link: '#points',
+  },
+  {
+    title: 'Make an appointment',
+    link: '#appointment',
+  },
+  {
+    title: 'Products 2',
+    link: 'products-2',
+    sub: [
+      {
+        title: 'Payments',
+        link: 'payments-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+    ],
+  },
+
+  {
+    title: 'Products 3',
+    sub: [
+      {
+        title: 'Payments',
+        link: 'payments-collections',
+        sub: [
+          { title: 'Payments & Collections', link: '#' },
+          { title: 'Merchant Commerce Solutions', link: 'merchant-commerce-solutions' },
+          { title: 'Instant Payments', link: 'instant-payments' },
+          { title: 'SEPA Direct Debit', link: 'SEPA-direct-debit' },
+          { title: 'SEPA Credit Transfer', link: 'SEPA-credit-transfer' },
+          { title: 'International Credit Transfer', link: 'international-credit-transfer' },
+          { title: 'Account Reporting', link: 'account-deporting' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Loyalty shop 2',
+    link: '#points',
+  },
+  {
+    title: 'Make an appointment 2',
+    link: '#appointment',
+  },
+];
+
+const secondaryMenu = [
+  {
+    title: 'Back to old website',
+    link: 'https://www.ingwb.com',
+    target: '_self',
+    trackid: 'backToOldWebsite',
+  },
+];
+
+const ctaPrimary = {
+  id: 'cta-primary',
+  label: 'Log in',
+  href: '#login',
+};
+
+const ctaSecondary = {
+  id: 'cta-secondary',
+  label: 'Open an account',
+  href: '#open-account',
+};
+
+// N.B. these should be provided via api call
+const suggestions = ['A', 'B', 'C', 'D'];
+```
+
+```js preview-story
+export const navigationBar = () => {
+  return html`<lion-navigation-bar
+    .menuItems="${menuData}"
+    .menuSupportItems="${secondaryMenu}"
+    .ctaPrimary="${ctaPrimary}"
+    .ctaSecondary="${ctaSecondary}"
+    .suggestions="${suggestions}"
+  >
+    .prefilledSuggestion="${suggestions[0]}"</lion-navigation-bar
+  >`;
+};
+```

package/docs/components/menu/index.md

@@ -0,0 +1,13 @@
+---
+title: Menu
+parts:
+  - Menu
+eleventyNavigation:
+  key: Menu
+  order: 20
+  title: Menu
+---
+
+# Menu
+
+-> go to Overview