Merge pull request #263 from rackerlabs/add-issue-template

chore(github): Add Bug Report issue template

Author: CITguy

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,34 @@
+---
+name: Bug Report
+about: Create a report to help us improve
+
+---
+
+## Describe the Bug
+A clear and concise description of what the bug is.
+
+## Steps to Reproduce
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. ...
+5. Dogs and cats living together!
+
+## Expected behavior
+A clear and concise description of what you expected to happen.
+
+## Screenshots
+If applicable, add screenshots to help explain your problem.
+
+## Environment
+Please complete the following information:
+
+ - Device: [e.g. Desktop, Laptop, iPhone6, etc.]
+ - OS: [e.g. iOS]
+ - Browser: [e.g. chrome, safari]
+ - Version: [e.g. 22]
+
+## Additional Context
+Add any other context about the problem here.

docs/_templates/partials/global_nav.njk

@@ -1,5 +1,16 @@
-<nav class="global-nav">
-  <a class="brand-logo" href="">
-    <img src="images/helix-logo.svg" alt="Logo" />
-  </a>
-</nav>
+<div id="app-header">
+  <nav>
+    <a class="brand-logo" href="">
+      <img src="images/helix-logo.svg" alt="Logo" />
+    </a>
+  </nav>
+  <div>
+    <a
+      class="hxBtn beta-hxDark"
+      target="_blank"
+      href="https://github.com/rackerlabs/helix-ui/issues/new?template=bug-report.md&labels=Bug:+Unconfirmed"
+    >
+      Report Bug
+    </a>
+  </div>
+</div>

docs/docs.less

@@ -13,13 +13,43 @@
   background-image: linear-gradient(0deg, @cyan-100, @gray-0 20%);
 }
 
+#app-header {
+  display: flex;
+  padding-right: 1rem;
+
+  > * {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    flex-grow: 1;
+
+    &:first-child { // brand logo
+      flex: 0 0 @app-nav-width;
+    }
+
+    &:last-child {
+      justify-content: flex-end;
+    }
+  }
+}
+
 .brand-logo {
   align-items: center;
   display: flex;
   height: 3.5rem;
   justify-content: center;
   width: @app-nav-width;
 
+  &:focus {
+    box-shadow: none;
+    outline: none;
+
+    img {
+      outline: 1px dotted @cyan-100;
+      outline-offset: 0.25rem;
+    }
+  }
+
   img {
     height: 2rem;
   }

src/helix-ui/styles/components/buttons.less

@@ -161,6 +161,26 @@ a[href].hxBtn {
   }
 }//.hxBtnGroup
 
+
+// DARK BUTTONS (BETA)
+.hxBtn.beta-hxDark,
+a[href].hxBtn.beta-hxDark {
+  border-color: @cyan-500;
+  color: @cyan-500;
+
+  &:hover {
+    &:extend(.hxBtn:hover);
+    color: @gray-0;
+  }
+  &:active {
+    &:extend(.hxBtn:active);
+  }
+  &:focus {
+    &:extend(.hxBtn:focus);
+    box-shadow: 0 0 4px 2px fade(@cyan-500, 60%);
+  }
+}
+
 // ========== TODO ==========
 // encapsulate these styles in an <hx-button> element
 .hxBtn {