Merge branch 'master' of github.com:ionic-team/ionic-docs

# Conflicts:
#	src/components/menu/templates/main.tsx
#	src/pages/building/migration.md
#	src/pages/installation/cdn.md
#	src/pages/layout/css-utilities.md

Author: rdlabo

app.json

@@ -0,0 +1,36 @@
+{
+  "addons": [
+    "papertrail"
+  ],
+  "buildpacks": [
+    {
+      "url": "heroku/nodejs"
+    }
+  ],
+  "env": {
+    "NODE_ENV": {
+      "required": true
+    },
+    "NODEMODULESCACHE": {
+      "required": true
+    },
+    "NPM_CONFIG_PRODUCTION": {
+      "required": true
+    },
+    "PORT": {
+      "required": true
+    },
+    "PROD": {
+      "required": true
+    }
+  },
+  "formation": {
+    "web": {
+      "quantity": 1
+    }
+  },
+  "name": "ionic-docs",
+  "scripts": {
+  },
+  "stack": "heroku-18"
+}

package-lock.json

@@ -18,8 +18,8 @@
     "watch-pages": "ts-node -P scripts/tsconfig.json scripts/watch-pages"
   },
   "dependencies": {
-    "@ionic/core": "^4.1.1",
-    "@ionic/docs": "^4.1.1",
+    "@ionic/core": "^4.1.2",
+    "@ionic/docs": "^4.1.2",
     "@stencil/core": "^0.18.0",
     "@stencil/router": "^0.3.3",
     "express": "^4.16.4"

package.json

@@ -157,12 +157,14 @@ export namespace Components {
   }
 
   interface DocsDropdown {
+    'align': 'left' | 'right' | 'center';
     'close': () => void;
     'label': string;
     'open': () => void;
     'toggle': () => void;
   }
   interface DocsDropdownAttributes extends StencilHTMLAttributes {
+    'align'?: 'left' | 'right' | 'center';
     'label'?: string;
   }
 
@@ -250,9 +252,6 @@ export namespace Components {
   interface DocsSearch {}
   interface DocsSearchAttributes extends StencilHTMLAttributes {}
 
-  interface DocsSectionNav {}
-  interface DocsSectionNavAttributes extends StencilHTMLAttributes {}
-
   interface SmsForm {}
   interface SmsFormAttributes extends StencilHTMLAttributes {}
 
@@ -321,7 +320,6 @@ declare global {
     'DocsReference': Components.DocsReference;
     'DocsRoot': Components.DocsRoot;
     'DocsSearch': Components.DocsSearch;
-    'DocsSectionNav': Components.DocsSectionNav;
     'SmsForm': Components.SmsForm;
     'SteppedColorGenerator': Components.SteppedColorGenerator;
     'DocsTableOfContents': Components.DocsTableOfContents;
@@ -362,7 +360,6 @@ declare global {
     'docs-reference': Components.DocsReferenceAttributes;
     'docs-root': Components.DocsRootAttributes;
     'docs-search': Components.DocsSearchAttributes;
-    'docs-section-nav': Components.DocsSectionNavAttributes;
     'sms-form': Components.SmsFormAttributes;
     'stepped-color-generator': Components.SteppedColorGeneratorAttributes;
     'docs-table-of-contents': Components.DocsTableOfContentsAttributes;
@@ -563,12 +560,6 @@ declare global {
     new (): HTMLDocsSearchElement;
   };
 
-  interface HTMLDocsSectionNavElement extends Components.DocsSectionNav, HTMLStencilElement {}
-  var HTMLDocsSectionNavElement: {
-    prototype: HTMLDocsSectionNavElement;
-    new (): HTMLDocsSectionNavElement;
-  };
-
   interface HTMLSmsFormElement extends Components.SmsForm, HTMLStencilElement {}
   var HTMLSmsFormElement: {
     prototype: HTMLSmsFormElement;
@@ -632,7 +623,6 @@ declare global {
     'docs-reference': HTMLDocsReferenceElement
     'docs-root': HTMLDocsRootElement
     'docs-search': HTMLDocsSearchElement
-    'docs-section-nav': HTMLDocsSectionNavElement
     'sms-form': HTMLSmsFormElement
     'stepped-color-generator': HTMLSteppedColorGeneratorElement
     'docs-table-of-contents': HTMLDocsTableOfContentsElement
@@ -673,7 +663,6 @@ declare global {
     'docs-reference': HTMLDocsReferenceElement;
     'docs-root': HTMLDocsRootElement;
     'docs-search': HTMLDocsSearchElement;
-    'docs-section-nav': HTMLDocsSectionNavElement;
     'sms-form': HTMLSmsFormElement;
     'stepped-color-generator': HTMLSteppedColorGeneratorElement;
     'docs-table-of-contents': HTMLDocsTableOfContentsElement;

src/components.d.ts

@@ -26,9 +26,9 @@
 
 .Dropdown-button > svg {
   fill: currentColor;
-  height: 1em;
-  margin-bottom: -0.15em;
-  width: 1em;
+  height: 0.8em;
+  margin-bottom: -0.0875em;
+  width: 0.8em;
 }
 
 .Dropdown.is-open .Dropdown-button > svg {
@@ -37,11 +37,10 @@
 
 .Dropdown-panel {
   background-color: var(--background);
-  border-radius: 4px;
+  border-radius: 6px;
   border: solid 1px var(--line-rule-color);
   box-shadow: 4px 4px 12px 4px rgba(0,0,0,0.025);
-  left: 0;
-  min-width: 120%;
+  min-width: 100%;
   overflow: hidden;
   pointer-events: none;
   position: absolute;
@@ -53,3 +52,35 @@
   pointer-events: auto;
   visibility: visible;
 }
+
+.Dropdown--left .Dropdown-panel {
+  left: 0;
+}
+
+.Dropdown--right .Dropdown-panel {
+  right: 0;
+}
+
+.Dropdown--center .Dropdown-panel {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.Dropdown-panel a {
+  display: block;
+  padding: 0.5em 1em;
+}
+
+@media (hover: hover) {
+  .Dropdown-panel a:hover {
+    background-color: rgba(0, 0, 0, 0.025);
+  }
+}
+
+.Dropdown-panel > section {
+  padding: 0.5em 0;
+}
+
+.Dropdown-panel > section:not(:last-child) {
+  border-bottom: solid 1px var(--line-rule-color);
+}

src/components/dropdown/dropdown.css

@@ -1,20 +1,26 @@
-import { Component, Listen, Method, Prop, State } from '@stencil/core';
+import { Component, Element, Listen, Method, Prop, State } from '@stencil/core';
 import { DownArrow } from '../../icons';
 
 @Component({
   tag: 'docs-dropdown',
   styleUrl: 'dropdown.css'
 })
 export class DocsDropdown {
+  @Prop() align: 'left' | 'right' | 'center' = 'left';
   @Prop() label: string;
   @State() isOpen = false;
+  @Element() element: HTMLElement;
 
-  @Listen('click')
+  @Listen('window:click')
   handleClick(event: MouseEvent) {
-    event.stopPropagation();
+    const isNode = event.target instanceof Node;
+    const isOurs = isNode && this.element.contains(event.target as Node);
+
+    if (!isOurs) {
+      this.close();
+    }
   }
 
-  @Listen('window:click')
   @Method()
   close() {
     this.isOpen = false;
@@ -34,6 +40,7 @@ export class DocsDropdown {
     return {
       class: {
         'Dropdown': true,
+        [`Dropdown--${this.align}`]: true,
         'is-open': this.isOpen
       }
     };
@@ -43,13 +50,17 @@ export class DocsDropdown {
     const button = (
       <button
         class="Dropdown-button"
+        aria-haspopup="menu"
+        aria-expanded={this.isOpen ? 'true' : 'false'}
         onClick={this.toggle.bind(this)}>
         {this.label} <DownArrow/>
       </button>
     );
 
     const panel = (
-      <div class="Dropdown-panel">
+      <div
+        role="menu"
+        class="Dropdown-panel">
         <slot/>
       </div>
     );

src/components/dropdown/dropdown.tsx

@@ -30,19 +30,10 @@ docs-header {
 }
 
 docs-header header {
-  height: var(--header-height);
-  padding: 0 1.4rem 0 0.8rem;
-}
-
-docs-header header,
-docs-header nav {
   align-items: center;
   display: flex;
-}
-
-docs-header header > *:not(:last-child),
-docs-header nav > *:not(:last-child) {
-  margin-right: 1em;
+  height: var(--header-height);
+  padding: 0 1.4rem 0 0.8rem;
 }
 
 docs-header a {
@@ -62,15 +53,102 @@ docs-header .link-active {
 
 docs-header docs-menu-toggle {
   flex: none;
+  margin-right: 0.75em;
 }
 
 .HeaderLogo {
   color: var(--text-color--dark);
   font-family: var(--heading-font-family);
   height: 25px;
+  margin-right: 0.125em;
+}
+
+.SectionNav stencil-route {
+  display: flex;
+}
+
+.SectionNav .Dropdown {
+  align-self: center;
+  color: var(--text-color);
+  margin-right: 0.75em;
+}
+
+.SectionNav .Dropdown-button {
+  border: solid 1px transparent;
+  border-radius: 6px;
+  color: var(--text-color--dark);
+  padding: 10px;
+  transition: border-color 100ms ease;
+}
+
+.SectionNav .Dropdown.is-open .Dropdown-button {
+  border-color: var(--line-rule-color);
+}
+
+@media (hover: hover) {
+  .SectionNav .Dropdown-button:hover {
+    border-color: var(--line-rule-color);
+  }
+}
+
+.SectionNav .Dropdown-panel {
+  min-width: 180px;
+}
+
+.SectionNav .Dropdown-panel a {
+  display: flex;
+  justify-content: space-between;
+}
+
+.SectionNav .Dropdown-panel svg {
+  height: 1em;
+  width: 1em;
+}
+
+.SectionNav-tabs > * {
+  align-items: center;
+  display: inline-flex;
+  height: var(--header-height);
+  margin-right: 1em;
+  position: relative;
+}
+
+.SectionNav-tabs .link-active:after {
+  background-color: currentColor;
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 2px;
+  left: 0;
+  position: absolute;
+  width: 100%;
 }
 
 .UtilNav {
+  align-items: center;
+  display: flex;
   font-size: 12px;
   margin-left: auto;
 }
+
+.UtilNav > * {
+  margin-left: 1em;
+}
+
+.UtilNav .Dropdown.is-open {
+  color: var(--text-color);
+}
+
+.UtilNav .Dropdown-button {
+  padding: 10px 0;
+}
+
+@media (hover: hover) {
+  .UtilNav .Dropdown-button:hover {
+    color: var(--text-color);
+  }
+}
+
+.UtilNav .Dropdown-panel {
+  font-size: 14px;
+}