Merge branch 'develop'

Author: edeustace

README.md

@@ -49,16 +49,13 @@ cd demo
 
 ## Test 
 
-Until the new web component tester is released - we have to clone and build:
+> Warning: Tests are currently failing - selenium is failing to boot chrome. It may be that we have to move away from web-component-tester.
+
+
+> You'll need to `bower install Polymer/web-component-tester --save` to install wct bower deps.
 
 ```shell
-git clone [email protected]:Polymer/web-component-tester.git
-cd web-component-tester
-git checkout v6.0.0-prerelease.6
-npm link
-# wct is now available as an executable
-cd pie-catalog-client
-npm test
+npm install -g web-component-tester
 ```
 
 Once it's released we can just add it to the `devDependencies`, and update the npm test cmd.  

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pie-catalog-client",
-  "version": "1.5.0",
+  "version": "2.0.0-prerelease",
   "description": "The client code for the catalog",
   "scripts": {
     "test": "./node_modules/.bin/webpack --config test-build/webpack.config.js && wct",

src/bootstrap/common.js

@@ -0,0 +1,37 @@
+require('./common.less');
+
+import AvatarService from '../avatar-service';
+import CatalogContainer from '../catalog-container';
+import CatalogFooter from '../footer';
+import CatalogHeader from '../header';
+import CatalogListing from '../listing';
+import CatalogListings from '../listings';
+import CatalogOrg from '../org';
+import GithubAvatar from '../github-avatar';
+import PieBrand from '../pie-brand';
+import ProgressBar from '../progress-bar';
+
+export const defineCommonElements = () => {
+  const elementMap = {
+    'catalog-listings': CatalogListings,
+    'catalog-listing': CatalogListing,
+    'catalog-header': CatalogHeader,
+    'catalog-footer': CatalogFooter,
+    'catalog-org': CatalogOrg,
+    'github-avatar': GithubAvatar,
+    'pie-brand': PieBrand,
+    'progress-bar': ProgressBar,
+    'catalog-container': CatalogContainer,
+    'avatar-service': AvatarService
+  }
+
+  const keys = Object.keys(elementMap);
+
+  keys.forEach(k => {
+    customElements.define(k, elementMap[k]);
+  });
+
+  const definedPromises = ['catalog-container'].concat(keys).map(k => customElements.whenDefined(k));
+
+  return Promise.all(definedPromises);
+}

src/common.less renamed to src/bootstrap/common.less

@@ -1,8 +1,4 @@
-import { VIEW_ORG } from '../events';
-import common from '../common';
-
-//Common will resolve first
-export { common };
+import { defineCommonElements } from './common';
 
 //logic next 
 export const logic = require.ensure([], () => {
@@ -51,5 +47,10 @@ let repoElements = [
   'catalog-demo'
 ];
 
+
 //This will happen at the end
-export const elementsDefined = Promise.all(repoElements.map(e => customElements.whenDefined(e)));
+export const defineRepoElements = () => {
+  const elementPromises = repoElements.map(e => customElements.whenDefined(e));
+  const promises = [defineCommonElements()].concat(elementPromises);
+  return Promise.all(promises);
+}

src/bootstrap/index.js

@@ -1,5 +1,3 @@
-import * as events from './events';
-
 import { applyStyle, boxShadow, prepareTemplate } from './styles';
 
 const templateHTML = `
@@ -38,30 +36,15 @@ const templateHTML = `
         padding-left: 5px;
       }
 
-      #org {
-        padding-left: 15px;
-        font-size: 14px;
-        line-height: 36px;
-        cursor: pointer;
-        transition: color ease-in 100ms;
-        color: rgba(0,0,0,0.8);
-        color: rgba(0,0,0,0.8);      
-      }
-
-      #org:hover{
-        color: rgba(0,0,0,0.5);
-      }
-
       github-avatar{
         padding-left: 5px;
       }
 
     </style>
    <div>
      <div class="header">
-       <div id="repo"></div>
+       <div id="name"></div>
        <div id="version"></div>
-       <div id="org"></div>
        <github-avatar size="30"></github-avatar>
      </div>
      <c-tabs>
@@ -105,14 +88,10 @@ export default class CatalogEntry extends HTMLElement {
     }
     let e = this._element;
 
-    this.shadowRoot.querySelector('#repo').textContent = e.repo;
+    this.shadowRoot.querySelector('#name').textContent = e.name;
     this.shadowRoot.querySelector('#version').textContent = e.tag;
-    this.shadowRoot.querySelector('#org').textContent = e.org;
-    this.shadowRoot.querySelector('github-avatar').setAttribute('user', e.org);
+    this.shadowRoot.querySelector('github-avatar').setAttribute('user', e.name);
 
-    this.shadowRoot.querySelector('#org').addEventListener('click', (e) => {
-      this.dispatchEvent(events.viewOrg(this._element));
-    });
 
     customElements.whenDefined('info-panel')
       .then(() => {

src/bootstrap/org.js

@@ -1,23 +1,11 @@
 
-export const VIEW_ORG = 'view-org';
-export const VIEW_REPO = 'view-repo';
+export const ELEMENT_CLICK = 'on-element-click';
 
-export function viewRepo(element) {
-  return new CustomEvent(VIEW_REPO, {
+export function elementClick(element) {
+  return new CustomEvent(ELEMENT_CLICK, {
     bubbles: true,
     composed: true,
-    detail: {
-      element: element
-    }
+    detail: { element }
   });
 }
 
-export function viewOrg(element) {
-  return new CustomEvent(VIEW_ORG, {
-    bubbles: true,
-    composed: true,
-    detail: {
-      element: element
-    }
-  });
-}