Merge branch 'master' into esulisttests

Author: amyrlam

addon/components/es-navbar/link/component.js

@@ -30,13 +30,9 @@ export default Component.extend({
 
   navbar: service(),
 
-  init() {
-    this._super(...arguments);
-
+  didInsertElement() {
     this.element.tabIndex = -1;
-  },
 
-  didInsertElement() {
     this.get('navbar').register(this);
     this.domNode = this.element.querySelector('ul[role="menu"]');
 
@@ -69,8 +65,8 @@ export default Component.extend({
     // Set CSS properties
     if(this.domNode) {
       this.domNode.style.display = 'block';
-      this.domNode.style.top = (rect.height - 1) + 'px';
-      this.domNode.style.zIndex = 100;
+      this.domNode.style.top = rect.height + 'px';
+      this.domNode.style.zIndex = 1000;
     }
 
     this.set('expanded', true);

addon/components/es-navbar/template.hbs

@@ -7,7 +7,7 @@
   </a>
 
   <ul role="menubar" aria-expanded="false">
-    {{#each links as |link index|}}
+    {{#each navLinks as |link index|}}
       {{es-navbar/link link=link index=index}}
     {{/each}}
   </ul>
@@ -39,7 +39,11 @@
     </form>
   {{/if}}
 
-  <button class="navbar-toggler ember-view" onclick={{action "toggleMenu"}}>
+  <button
+    class="navbar-toggler ember-view"
+    onclick={{action "toggleMenu"}}
+    aria-label="Open navigation"
+  >
     <span class="navbar-toggler-icon"></span>
   </button>
 </div>

addon/constants/es-footer.js

@@ -16,18 +16,22 @@ const socialLinks = [{
 
 const contributorLinks = [{
   name: 'Hosted by:',
+  title: "Heroku",
   href: 'https://www.heroku.com/emberjs',
   class: 'heroku-logo'
 }, {
   name: 'CDN provided by:',
+  title: "Fastly",
   href: 'https://www.fastly.com',
   class: 'fastly-logo'
 }, {
   name: 'Tested with:',
+  title: "Percy",
   href: 'https://percy.io',
   class: 'percy-logo'
 }, {
   name: 'Resolved with:',
+  title: "Dnsimple",
   href: 'https://dnsimple.com/resolving/emberjs',
   class: 'dnsimple-logo-dark'
 }];

addon/constants/links.js

@@ -24,20 +24,20 @@ export default [{
   name: 'Releases',
   type: 'dropdown',
   items: [{
-    href: 'https://emberjs.com/builds',
+    href: 'https://emberjs.com/releases',
     name: 'Channels',
     type: 'link'
   }, {
-    href: 'https://emberjs.com/builds/release',
-    name: '→ Stable',
+    href: 'https://emberjs.com/releases/release',
+    name: '→ Stable',
     type: 'link'
   }, {
-    href: 'https://emberjs.com/builds/beta',
-    name: '→ Beta',
+    href: 'https://emberjs.com/releases/beta',
+    name: '→ Beta',
     type: 'link'
   }, {
-    href: 'https://emberjs.com/builds/canary',
-    name: '→ Canary',
+    href: 'https://emberjs.com/releases/canary',
+    name: '→ Canary',
     type: 'link'
   }, {
     type: 'divider'
@@ -116,7 +116,7 @@ export default [{
   }, {
     type: 'divider'
   }, {
-    href: 'https://emberjs.com/legal',
+    href: 'https://emberjs.com/about/legal',
     name: 'Legal',
     type: 'link'
   }, {

addon/services/navbar.js

@@ -13,6 +13,10 @@ export default Service.extend({
     this.firstChars.push(item.element.querySelector('a').text.trim()[0].toLowerCase());
   },
 
+  closePopupMenu() {
+    this.items.forEach(item => item.closePopupMenu());
+  },
+
   setFocusToNextItem(item) {
     const items = this.get('items');
 

addon/styles/_es-header.scss

@@ -1,4 +1,5 @@
 .es-header {
   grid-area: header;
   background-color: $primary;
+  z-index: 1000;
 }

addon/styles/_es-navbar.scss

@@ -1,3 +1,7 @@
+$menu-height: 55px;
+$menu-orange: #9b2918;
+$dropdown-border-radius: 6px;
+
 nav.es-navbar {
   width: 100%;
   background-color: $orange;
@@ -8,21 +12,24 @@ nav.es-navbar .spacer {
 }
 
 nav.es-navbar hr {
-  border-top: 1px solid $orange;
-  margin: 0.1em 0;
+  margin: 0;
 }
 
 ul li[aria-expanded=true] {
   background-color: white;
 
   a[role=menuitem] {
-    color: $orange;
+    color: $menu-orange;
   }
 }
 
-li[aria-expanded=true] ul.dropdown {
-  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+li[aria-expanded=true] ul[role="menu"].dropdown {
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   background-color: white;
+  border: solid 1px rgba(0,0,0, .1);
+  border-top: 0;
+  // this is adjusting for the border
+  margin-left: -1px;
 }
 
 ul[role="menubar"] {
@@ -42,13 +49,13 @@ ul[role="menubar"][aria-expanded="false"] {
 ul[role="menubar"] [role="menuitem"] {
   height: 100%;
   padding: 0 .5em;
-  line-height: 50px;
+  line-height: $menu-height;
 }
 
 ul[role="menubar"] [role="menuitem"]:focus,
 ul[role="menubar"] [role="menuitem"]:hover {
   background-color: white;
-  color: $orange;
+  color: $menu-orange;
 }
 
 ul[role="menubar"] a[role="menuitem"] {
@@ -63,14 +70,16 @@ ul li[aria-expanded=true] ul.dropdown a[role="menuitem"]:hover  {
 }
 
 ul.dropdown a[role="menuitem"] {
-  color: $orange;
+  color: $menu-orange;
   padding: 0 1em;
+  font-size: 0.8em;
+  line-height: 2.5em;
 }
 
 ul[role="menubar"] [role="menuitem"]:focus,
 ul[role="menubar"] [role="menuitem"]:hover {
   background-color: white;
-  color: $orange;
+  color: $menu-orange;
 }
 
 ul[role="menubar"] li {
@@ -88,9 +97,16 @@ ul[role="menubar"] > li {
 }
 
 ul[role="menubar"] > li.dropdown > a:after {
-  content: '\25bc';
-  font-size: small;
-  padding-left: .25em;
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: 4px dashed;
+  border-top: 4px solid \9;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
 }
 
 ul[role="menubar"][aria-expanded="true"] ul[role="menu"]{
@@ -143,6 +159,12 @@ ul[role="menubar"] ul[role="menu"] a[aria-haspopup="true"]:after {
   background-size: 100% 100%;
 }
 
+@media (max-width: 991px) {
+  ul[role="menubar"][aria-expanded="false"] > li {
+    display: none;
+  }
+}
+
 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) {
   nav.es-navbar div.container {
@@ -154,7 +176,7 @@ ul[role="menubar"] ul[role="menu"] a[aria-haspopup="true"]:after {
   ul[role="menubar"] {
     flex-direction: row;
     align-items: center;
-    min-height: 55px;
+    min-height: $menu-height;
   }
 
   ul[role="menubar"] > li {
@@ -167,6 +189,12 @@ ul[role="menubar"] ul[role="menu"] a[aria-haspopup="true"]:after {
     position: absolute;
   }
 
+  li[aria-expanded=true] ul.dropdown,
+  li[aria-expanded=true] ul.dropdown li:last-child a {
+    border-bottom-right-radius: $dropdown-border-radius;
+    border-bottom-left-radius: $dropdown-border-radius;
+  }
+
   ul[role="menubar"] ul[role="menu"] {
     position: absolute;
     top: inherit;

addon/styles/_es-note.scss

@@ -6,10 +6,7 @@
 	justify-content: center;
 	min-width: 100px;
 	margin: auto;
-	max-width: 95%;
-	@media screen and (min-width: 992px){
-		max-width: 80%;
-	}
+  max-width: 100%;
 	&.cta-background {
 		background-color: $orange-lightest;
 		border-radius: 2px;

addon/templates/components/es-footer.hbs

@@ -13,7 +13,7 @@
 
       {{!--
         Pass footer properties to support
-        {{es-footer tagline="My custom tagline" contributorLinks=myLinks}}
+        <EsFooter @tagline="My custom tagline" @contributorLinks={{myLinks}}/>
       --}}
       {{es-footer/es-info infoLinks=infoLinks}}
       {{es-footer/es-statement tagline=tagline socialLinks=socialLinks}}

addon/templates/components/es-footer/es-contributions.hbs

@@ -5,7 +5,7 @@
   {{#each contributorLinks as |link|}}
     <div class="contributor">
       <p>{{link.name}}</p>
-      <a href={{link.href}}>
+      <a href={{link.href}} title={{link.title}}>
         {{svg-jar link.class class="contributor-logo"}}
       </a>
     </div>

package.json

@@ -41,10 +41,11 @@
   "devDependencies": {
     "@ember/optional-features": "^0.7.0",
     "@fortawesome/ember-fontawesome": "^0.1.8",
-    "@fortawesome/free-solid-svg-icons": "5.4.2",
     "@fortawesome/free-regular-svg-icons": "5.4.2",
+    "@fortawesome/free-solid-svg-icons": "5.4.2",
     "broccoli-asset-rev": "^3.0.0",
     "ember-a11y-landmarks": "^1.0.1",
+    "ember-angle-bracket-invocation-polyfill": "^1.3.0",
     "ember-cli": "~3.5.0",
     "ember-cli-addon-docs": "^0.6.0",
     "ember-cli-addon-docs-yuidoc": "^0.2.1",
@@ -55,7 +56,7 @@
     "ember-cli-deploy-git": "^1.3.3",
     "ember-cli-deploy-git-ci": "^1.0.1",
     "ember-cli-eslint": "^4.2.3",
-    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
+    "ember-cli-htmlbars-inline-precompile": "^1.0.5",
     "ember-cli-inject-live-reload": "^2.0.1",
     "ember-cli-mirage": "^0.4.9",
     "ember-cli-moment-shim": "^3.5.0",

tests/dummy/app/templates/docs/components/es-blog-heading.md

@@ -4,12 +4,12 @@
 
 {{#docs-demo as |demo|}}
   {{#demo.example name='es-blog-heading.hbs'}}
-    {{es-blog-heading
-      author='Sara Poster'
-      postDate='03-20-2018'
-      postUrl='https://emberjs.com/blog'
-      postTitle='Pretty Awesome Blog Post'
-    }}
+    <EsBlogHeading
+      @author='Sara Poster'
+      @postDate='03-20-2018'
+      @postUrl='https://emberjs.com/blog'
+      @postTitle='Pretty Awesome Blog Post'
+    />
   {{/demo.example}}
   {{demo.snippet 'es-blog-heading.hbs'}}
 {{/docs-demo}}
@@ -18,13 +18,13 @@
 
 {{#docs-demo as |demo|}}
   {{#demo.example name='es-blog-heading-guest.hbs'}}
-    {{es-blog-heading
-      author='Sara Poster'
-      postDate='03-20-2018'
-      postUrl='https://emberjs.com/blog'
-      postTitle='Pretty Awesome Blog Post'
-      isGuestPost=true
-    }}
+    <EsBlogHeading
+      @author='Sara Poster'
+      @postDate='03-20-2018'
+      @postUrl='https://emberjs.com/blog'
+      @postTitle='Pretty Awesome Blog Post'
+      @isGuestPost=true
+    />
   {{/demo.example}}
   {{demo.snippet 'es-blog-heading-guest.hbs'}}
 {{/docs-demo}}