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

package/docs/components/menu/applyMenuDemoStyles.js

@@ -1,173 +0,0 @@
-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

@@ -1,262 +0,0 @@
----
-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

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