feat(cxl-ui): cxl-marketing-nav

commit eee03b74ee8383d448908908ab77839ef5976207
Author: Leho Kraav <[email protected]>
Date:   Mon Nov 11 15:31:39 2019 +0200

    Help decorator support on Windows, fixup 7d294ae

commit ba52bcd3e343034555dc4aa4da6b86988b5d2161
Author: Leho Kraav <[email protected]>
Date:   Mon Nov 11 14:15:23 2019 +0200

    Enable Pika build decorator support [1], fixup 7d294ae

    For some reason root `babel.config.js` is not recognized, or we don't know
    how to configure it.

    RESEARCH

    * FredKSchott/standard-pkg#9
    * FredKSchott/standard-pkg@1a80ff5
    * https://babeljs.io/docs/en/config-files#monorepos
    * https://github.com/web-padawan/aybolit/blob/v0.1.0/babel.config.js#L15

    1: https://gitter.im/aybolitjs/community?at=5dc94b3d5eb2e813db04bdf4

commit 104c52aee026ab4f5d67ca0f9b5a18450fa4f46f
Author: Leho Kraav <[email protected]>
Date:   Mon Nov 11 12:12:18 2019 +0200

    Upgrade Pika

commit 55b9f6c858cbb2cb4214e68520fea4eec0ae5312
Author: Leho Kraav <[email protected]>
Date:   Mon Nov 11 11:36:36 2019 +0200

    Deploy Storybook to GH Pages

commit bd2828a2574eb60baf77d4cccb3176929d3c24bb
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 10 22:34:43 2019 +0200

    Improve context menu overlay position

commit 9290851a43cefdc0126df1e1de09edc47b760fc2
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 10 21:40:31 2019 +0200

    Add missing imports

commit 4c9b3ae8bfdf474f91a70f69457da469aae471d8
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 10 20:37:48 2019 +0200

    Refactor away from split button navigation [1]

    1: https://www.nngroup.com/articles/split-buttons-navigation/

commit 37349e36d135b674bee1009e664f4c42710d802b
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 10 19:00:22 2019 +0200

    More Global nav items, rename Shadow -> Global

commit 7d294aec818fc3d7bebc2cf041ee98dd2a109b93
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 10 17:39:19 2019 +0200

    Convert to TC39 decorators [1]

    1: https://lit-element.polymer-project.org/guide/properties#declare-with-decorators

commit 4a3eac799f2654d1749cdfd0d21c15500607a722
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 10 14:57:55 2019 +0200

    CXL Live icon

commit acbdbe38c05ecd912bfe4f2bcfb2b781e9fb06fd
Author: Leho Kraav <[email protected]>
Date:   Sat Nov 9 23:54:39 2019 +0200

    Wip shadow menu

commit 4f8623def1f3abe47333a413801fbd2b7e04ed85
Author: Leho Kraav <[email protected]>
Date:   Sat Nov 9 15:50:17 2019 +0200

    Storybook 5.3.0-alpha.42 [1] HMR full page reloads [2]

    1: storybookjs/storybook#8400
    2: https://github.com/storybookjs/storybook/tree/v5.3.0-alpha.42/app/web-components#user-content-setup-page-reload-via-hmr

commit b71f42034d1496055a98d915e5425fc91c71c83d
Author: Leho Kraav <[email protected]>
Date:   Sat Nov 9 15:08:41 2019 +0200

    Storybook 5.2.6

commit 58009c953cf3d32c938cf856204ac18c89c8f012
Author: Leho Kraav <[email protected]>
Date:   Fri Nov 8 19:22:06 2019 +0200

    Search form label brand color

commit ab9359d3af5682ebf4e617d64ee3e4897e64f093
Author: Leho Kraav <[email protected]>
Date:   Fri Nov 8 15:49:45 2019 +0200

    Embedded search form can now receive all keyboard input

commit 289535c2d591be2027c074e08710ac8f89ab04f4
Author: Leho Kraav <[email protected]>
Date:   Fri Nov 8 15:08:56 2019 +0200

    Drop apparently unnecessary imports

commit 7f61645f7e0809dd09f7af0411c49a2e0dad866e
Author: Leho Kraav <[email protected]>
Date:   Fri Nov 8 14:24:31 2019 +0200

    @todo refactor Resize event listener towards removable in `disconnectedCallback()`

commit c58d6eea0ed4311fb72d79a77bf6321202d2354b
Author: Leho Kraav <[email protected]>
Date:   Fri Nov 8 11:56:59 2019 +0200

    Improve Search menu item form curiosities

commit d40af0ecd12daa3d606b0289c748bcc3981738cc
Author: Leho Kraav <[email protected]>
Date:   Fri Nov 8 10:02:14 2019 +0200

    ESLint

commit 519d17fc486072813a043e8ba8b96e4651b3bcc5
Author: Leho Kraav <[email protected]>
Date:   Thu Nov 7 17:53:41 2019 +0200

    Refactor fixed scroll listener, remove `that` pattern

commit 5bfe7f52e04cea0914af74b46fbf5d2074730c30
Author: Leho Kraav <[email protected]>
Date:   Thu Nov 7 17:01:01 2019 +0200

    Integrate vaadin-tabs resize listener

commit 0d368f2f356c554bed3fa2405210b8d8fd396348
Author: Leho Kraav <[email protected]>
Date:   Thu Nov 7 16:34:20 2019 +0200

    Refactor context menu dropdown icon vs menu item spacing

commit 3590baf34cebc2f69b9b6291474381e66c52c1e3
Author: Leho Kraav <[email protected]>
Date:   Thu Nov 7 16:44:41 2019 +0200

    Align Search menu item template with general context menu items population strategy

commit 409aed9bb159454b5f09702970cc635bda9a36c2
Author: Leho Kraav <[email protected]>
Date:   Thu Nov 7 12:13:02 2019 +0200

    Search menu item's full box should trigger context menu

commit 16192b015834e3ead778279574571d95ed8597f5
Author: Leho Kraav <[email protected]>
Date:   Tue Nov 5 14:59:11 2019 +0200

    CSS class configuration for split nav menu item

commit 4f099e1d313bb1cf62d8835c637a3dccf606d7eb
Author: Leho Kraav <[email protected]>
Date:   Tue Nov 5 14:39:55 2019 +0200

    CXLMarketingNavElement.contextMenuItems property and configuration engine

commit f30db212e2ac82c63459a136d4e7f08b9085281d
Author: Leho Kraav <[email protected]>
Date:   Tue Nov 5 13:00:20 2019 +0200

    Move utility <nav> wrap to shadow DOM

commit 6348064310227f1eca39b99ad08c783060e6260a
Author: Leho Kraav <[email protected]>
Date:   Tue Nov 5 11:14:31 2019 +0200

    Refactor cxl-marketing-nav

commit 9a5932738a636bd2bf4e091de4779dd3e7ac8ccd
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 3 17:33:50 2019 +0200

    Integrated search box menu item

    @todo search input fails to take Space, Enter keydown [1]

    1: vaadin/vaadin-context-menu#231 (comment)

commit fa209831dade6884c0437d979dd104fa6542f6b3
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 3 17:43:40 2019 +0200

    Match simple menu items HTML whitespace w/ complex

commit 989ae01e19b2ff2a6d1f19fc767db6c938238e47
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 3 17:42:40 2019 +0200

    Improve team invite menu item spacing

commit fca1edebc911f7f1a3bf6eefe04ae0c251dd158e
Author: Leho Kraav <[email protected]>
Date:   Sun Nov 3 17:44:32 2019 +0200

    Add logo menu item dropdown

commit cd9747da800bea2569ce31bec97a58ff57f9b4f2
Author: Leho Kraav <[email protected]>
Date:   Fri Nov 1 10:10:56 2019 +0200

    Match `resizeVaadinTabs()` wide width w/ vaadin-context-menu [1]

    1: https://github.com/vaadin/vaadin-context-menu/issues/253

commit f6584d21e00664683285975184fbea43653870bb
Author: Leho Kraav <[email protected]>
Date:   Thu Oct 31 19:25:22 2019 +0200

    Upgrade to @vaadin/vaadin-context-menu-4.3.12

    Ran into duplicate packages: "Custom element already defined"

    ```
    $ yarn workspace @conversionxl/cxl-ui upgrade-interactive @vaadin/vaadin-context-menu
    $ yarn-deduplicate
    $ yarn
    ```

commit dbfbe243cd3e5369e61365f90f08abd1bed672fb
Author: Leho Kraav <[email protected]>
Date:   Thu Oct 31 19:22:17 2019 +0200

    Make narrow viewport menu horizontal scroll icons visible

commit 88f8572ced8f8c4cdfba20f3cc9ca9bddd93ac18
Author: Leho Kraav <[email protected]>
Date:   Thu Oct 31 16:20:49 2019 +0200

    Force vaadin-tab slotted links hover text-underline [1]

    `yarn workspace @conversionxl/cxl-ui upgrade-interactive @vaadin/vaadin-tabs`
    helped acquire @vaadin/vaadin-themable-mixin-1.5.0+ [2]

    1: vaadin/vaadin-tabs#134 (comment)
    2: https://github.com/vaadin/vaadin-themable-mixin/releases/tag/v1.5.0

commit cb678593820364c17f02323c8401488c3720d831
Author: Leho Kraav <[email protected]>
Date:   Thu Oct 31 15:14:20 2019 +0200

    Menu background color --lumo-black

    * Refactor cxl:logo SVG icon, 24px height
    * Add matching cxl:logo[theme=dark] icon
    * Avoid cxl-marketing-nav element margin collapse

commit a3533b5174c29a1db8e6312735695e4547d9b99b
Author: Leho Kraav <[email protected]>
Date:   Wed Oct 30 21:28:39 2019 +0200

    Partially revert 5cbc1b6, re-simplify story tree structure

commit e7dbdb8411b8772a0fabb4d494911ac122121f01
Author: Leho Kraav <[email protected]>
Date:   Wed Oct 30 21:15:56 2019 +0200

    Increase dropdown icon hover visual prominence

commit c2a5143f8e36c99b0e798055244f1398765f8c60
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 19:06:52 2019 +0200

    Make vaadin-tabs orientation respond to window resize

commit cf280c9537e49f8ccad2d1a38d8f78050d0f79e1
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 18:37:51 2019 +0200

    Horizontal split navigation pattern

commit d84596c07b3106951f368df5b03793774ae87f6a
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 18:37:21 2019 +0200

    Add CXL logo menu item

commit 4ada5e545a23cf1ec77ffc750433adf50ae70a62
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 17:20:26 2019 +0200

    Context menu should open on "click" event

commit 857c4bb33f31f09f726ca97912361b800c54b6e7
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 16:57:03 2019 +0200

    Wrap vaadin-tabs in semantic nav element

commit 141b3532468078dc9c8a611ce534d9dd427bad46
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 16:37:16 2019 +0200

    Move context menu trigger outside menu item link

commit 055d2e80c85ac82da2c185e3406b654107146061
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 16:27:59 2019 +0200

    Prototype links inside vaadin-context-menu

commit c8280c72f09ba4c2b98f6a5a2dbb2935b0b3ad49
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 15:46:35 2019 +0200

    Many more contextMenuItems

commit 9b57508ea38f60a478e22ed81abb2bf3142d34fa
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 08:57:00 2019 +0200

    Nav container element (currently unknown) defaults to `display: inline`, we need `block`

commit 4583f1729587ad14f340ea7f0cc3d2f52d334b9a
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 08:06:11 2019 +0200

    Add links, drop unnecessary menu-item-depth classes

commit eab7f786b851f2a7f7bdbe6623e60dc3a7761af7
Author: Leho Kraav <[email protected]>
Date:   Tue Oct 29 08:04:27 2019 +0200

    Eliminate viewport vertical scrollbar

commit 5cbc1b6367cee0929756a33e6464f2ec630ac4b9
Author: Leho Kraav <[email protected]>
Date:   Mon Oct 28 23:09:12 2019 +0200

    Storybook CSF format

commit 20dc156026eed03b9cb3df0b76bb663713cd9503
Author: Leho Kraav <[email protected]>
Date:   Mon Oct 28 16:45:27 2019 +0200

    Wip cxl-marketing-nav v2 prototype

.eslintrc

@@ -44,7 +44,11 @@
       }
     }
   ],
+  "parser": "babel-eslint",
   "parserOptions": {
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    },
     "ecmaVersion": 2018,
     "sourceType": "module"
   }

.gitignore

@@ -1,8 +1,7 @@
 node_modules
 lerna-debug.log
-packages/**/src/**/styles/*-css.js
+packages/**/src/**/styles/**/*-css.js
 packages/**/pkg
 coverage
 tmp
 test/visual/screenshots
-

.stylelintrc

@@ -9,6 +9,12 @@
     "number-leading-zero": null,
     "property-no-vendor-prefix": [true, {
       "ignoreProperties": ["appearance", "user-select"]
+    }],
+    "selector-no-qualifying-type": [true, {
+      "ignore": ["attribute"]
+    }],
+    "selector-type-no-unknown": [true, {
+      "ignore": ["custom-elements"]
     }]
   }
 }

package.json

@@ -2,12 +2,15 @@
   "name": "aybolit-workspace",
   "private": true,
   "description": "Web Components library built with LitElement",
-  "author": "Serhii Kulykov <[email protected]>",
-  "license": "MIT",
+  "author": "CXL",
+  "contributors": [
+    "Serhii Kulykov <[email protected]>"
+  ],
+  "license": "SEE LICENSE IN LICENSE",
   "scripts": {
     "argos": "argos upload test/visual/screenshots/chrome --token $ARGOS_TOKEN || true",
     "build": "yarn build-styling",
-    "build-styling": "node packages/sass-render/bin/sass-render.js -s 'packages/*/scss/*.scss'",
+    "build-styling": "node packages/sass-render/bin/sass-render.js -s 'packages/*/scss/**/*.scss'",
     "deploy-storybook": "yarn --cwd packages/storybook storybook-to-ghpages",
     "dist": "lerna run dist",
     "lint": "npm-run-all --parallel lint:*",
@@ -26,13 +29,15 @@
     "node-watch": "^0.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/runtime": "^7.4.5",
+    "@babel/core": "^7.7.0",
+    "@babel/plugin-proposal-decorators": "^7.7.0",
+    "@babel/plugin-transform-runtime": "^7.6.0",
+    "@babel/preset-env": "^7.7.0",
+    "@babel/runtime": "^7.7.0",
     "@open-wc/testing-helpers": "^0.9.5",
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "argos-cli": "^0.1.1",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "chai": "^4.2.0",
     "eclint": "^2.8.1",

packages/cxl-lumo-styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conversionxl/cxl-lumo-styles",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "CXL <[email protected]>",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "src/index.js",
@@ -10,6 +10,8 @@
     "directory": "packages/cxl-lumo-styles"
   },
   "dependencies": {
-    "@vaadin/vaadin-lumo-styles": "^1.5.0"
+    "@polymer/iron-iconset-svg": "^3.0.1",
+    "@vaadin/vaadin-lumo-styles": "^1.5.0",
+    "lit-html": "^1.1.2"
   }
 }

packages/cxl-lumo-styles/scss/global.scss

@@ -0,0 +1,9 @@
+// @see https://github.com/necolas/normalize.css/blob/8.0.1/normalize.css#L12
+html {
+  line-height: 1.15; /* 1 */
+}
+
+// @see https://github.com/necolas/normalize.css/blob/8.0.1/normalize.css#L20
+body {
+  margin: 0;
+}

packages/cxl-lumo-styles/src/color.js

@@ -2,11 +2,7 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import styles from './styles/color-css.js';
 
 const $template = document.createElement('template');
-
 $template.innerHTML = `
-  <custom-style id="cxl-lumo-styles-color">
-    <style include="lumo-color">${styles}</style>
-  </custom-style>
+  <style id="cxl-lumo-styles-color" include="lumo-color">${styles}</style>
 `;
-
 document.head.appendChild($template.content);

packages/cxl-lumo-styles/src/global.js

@@ -0,0 +1,7 @@
+import styles from './styles/global-css.js';
+
+const $template = document.createElement('template');
+$template.innerHTML = `
+  <style id="cxl-lumo-styles-global">${styles}</style>
+`;
+document.head.appendChild($template.content);

packages/cxl-lumo-styles/src/index.js

@@ -1 +1,3 @@
+import './global.js';
 import './color.js';
+import './icons.js';

packages/cxl-ui/.babelrc

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "decoratorsBeforeExport": true
+      }
+    ],
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

packages/cxl-ui/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@conversionxl/cxl-ui",
+  "version": "0.1.0",
+  "author": "CXL",
+  "license": "SEE LICENSE IN LICENSE",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/conversionxl/aybolit",
+    "directory": "packages/cxl-ui"
+  },
+  "dependencies": {
+    "@conversionxl/cxl-lumo-styles": "^0.1.1",
+    "@pika/pack": "^0.5.0",
+    "@pika/plugin-build-web": "^0.7.1",
+    "@pika/plugin-bundle-web": "^0.7.1",
+    "@pika/plugin-standard-pkg": "^0.7.1",
+    "@vaadin/vaadin-context-menu": "^4.3.12",
+    "@vaadin/vaadin-tabs": "^3.0.5",
+    "@vaadin/vaadin-themable-mixin": "^1.5.2",
+    "lit-element": "^2.2.1",
+    "lit-html": "^1.1.2"
+  },
+  "@pika/pack": {
+    "pipeline": [
+      [
+        "@pika/plugin-standard-pkg"
+      ],
+      [
+        "@pika/plugin-build-web"
+      ],
+      [
+        "@pika/plugin-bundle-web"
+      ]
+    ]
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dist": "pika build"
+  }
+}

packages/cxl-ui/scss/cxl-marketing-nav.scss

@@ -0,0 +1,49 @@
+:host {
+  // Avoid margin collapse
+  display: inline-block;
+  width: 100%;
+
+  background-color: var(--lumo-shade);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/**
+ * @see https://www.smashingmagazine.com/2019/08/bottom-navigation-pattern-mobile-web-pages/
+:host(:not([wide])) {
+  bottom: 0;
+  position: fixed;
+}
+ */
+
+/* stylelint-disable-next-line selector-class-pattern */
+:host([wide]) .menu-item\\\:not-wide {
+  display: none;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+:host(:not([wide])) .menu-item\\\:wide {
+  display: none;
+}
+
+// @todo Magic number "8" is fragile, depends on menu item count
+:host(:not([wide])) .menu-items:not([selected="8"]) + ::slotted(.menu-items) {
+  display: none;
+}
+
+::slotted(.menu-items) {
+  --lumo-tertiary-text-color: var(--lumo-base-color);
+}
+
+.menu-item-menu-toggle {
+  &[selected] iron-icon:first-child,
+  &:not([selected]) iron-icon + iron-icon {
+    display: none;
+  }
+}
+
+.menu-items {
+  background-color: var(--lumo-tint);
+}

packages/cxl-ui/scss/cxl-marketing-nav/theme/global.scss

@@ -0,0 +1,9 @@
+cxl-marketing-nav {
+  .menu-item {
+    color: var(--lumo-base-color);
+
+    [icon="lumo:dropdown"] {
+      margin-left: auto;
+    }
+  }
+}

packages/cxl-ui/scss/cxl-marketing-nav/theme/vaadin-overlay.scss

@@ -0,0 +1,8 @@
+/**
+ * Magic number
+ *
+ * @todo Any non-`!important` methods available?
+ */
+:host {
+  --vaadin-overlay-viewport-bottom: 33% !important; /* stylelint-disable-line declaration-no-important */
+}

packages/cxl-ui/scss/cxl-marketing-nav/theme/vaadin-tab.scss

@@ -0,0 +1,7 @@
+:host([theme~="cxl-marketing-nav"]) ::slotted(a[href]:hover) {
+  text-decoration: underline dotted !important; /* stylelint-disable-line declaration-no-important */
+}
+
+:host([theme~="cxl-marketing-nav"].menu-item-split-nav) {
+  margin-left: auto;
+}

packages/cxl-ui/scss/cxl-marketing-nav/theme/vaadin-tabs.scss

@@ -0,0 +1,22 @@
+/**
+ * Unify orientations side margins and padding
+ */
+$vaadin-tab-padding: 0.75rem;
+
+// Match container margins w/ spacing between tabs
+:host([orientation="horizontal"][theme~="cxl-marketing-nav"]) [part="tabs"] {
+  margin-right: $vaadin-tab-padding;
+  margin-left: $vaadin-tab-padding;
+}
+
+// Align horizontal Global nav with vertical Primary nav
+:host([orientation="horizontal"][theme~="cxl-marketing-nav"][wide="false"]) [part="tabs"] {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+// Reduce spacing between tabs
+:host([theme~="cxl-marketing-nav"]) ::slotted(.menu-item) {
+  padding-right: $vaadin-tab-padding;
+  padding-left: $vaadin-tab-padding;
+}