Merge pull request #377 from primer/underline-nav

broccolini · web-flow · commit 19e684f6c7cf · 2017-11-07T17:15:53.000-05:00
Refactor underline nav
diff --git a/modules/primer-navigation/README.md b/modules/primer-navigation/README.md
@@ -48,7 +48,7 @@ Primer comes with several navigation components. Some were designed with singula
 
 The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`.
 
-```html
+```html title="Menu"
 <nav class="menu" aria-label="Person settings">
   <a class="menu-item selected" href="#url" aria-current="page">Account</a>
   <a class="menu-item" href="#url">Profile</a>
@@ -59,7 +59,7 @@ The menu is a vertical list of navigational links. **A menu's width and placemen
 
 There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
 
-```html
+```html title="Menu with octicons, avatars and counters"
 <nav class="menu" aria-label="Person settings">
   <a class="menu-item selected" href="#url" aria-current="page">
     <%= octicon "tools" %>
@@ -83,7 +83,7 @@ There are a few subcomponents and add-ons that work well with the menu, includin
 
 You can also add optional headings to a menu. Feel free to use nearly any semantic element with the `.menu-heading` class, including inline elements, headings, and more.
 
-```html
+```html title="Menu with heading"
 <nav class="menu" aria-labelledby="menu-heading">
   <span class="menu-heading" id="menu-heading">Menu heading</span>
   <a class="menu-item selected" href="#url" aria-current="page">Account</a>
@@ -93,12 +93,118 @@ You can also add optional headings to a menu. Feel free to use nearly any semant
 </nav>
 ```
 
+## Underline nav
+
+Use `.UnderlineNav` to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers and other content.
+
+```html title="UnderlineNav"
+<nav class="UnderlineNav">
+  <div class="UnderlineNav-body">
+    <a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
+    <a href="#url" role="tab" title="Item 2" class="UnderlineNav-item">Item 2</a>
+    <a href="#url" role="tab" title="Item 3" class="UnderlineNav-item">Item 3</a>
+    <a href="#url" role="tab" title="Item 4" class="UnderlineNav-item">Item 4</a>
+  </div>
+</nav>
+```
+
+Use `.UnderlineNav-actions` to place another element, such as a button, to the opposite side of the navigation items.
+
+```html title="UnderlineNav-actions"
+<nav class="UnderlineNav" aria-label="Foo bar">
+  <div class="UnderlineNav-body">
+    <a href="#url" class="UnderlineNav-item selected">Item 1</a>
+    <a href="#url" class="UnderlineNav-item">Item 2</a>
+    <a href="#url" class="UnderlineNav-item">Item 3</a>
+    <a href="#url" class="UnderlineNav-item">Item 4</a>
+  </div>
+  <div class="UnderlineNav-actions">
+    <a class="btn">Button</a>
+  </div>
+</nav>
+```
+
+Use `.UnderlineNav--right` to right align the navigation.
+
+```html title="UnderlineNav--right"
+<nav class="UnderlineNav UnderlineNav--right">
+  <div class="UnderlineNav-body">
+    <a href="#url" role="tab" title="Item 1" class="UnderlineNav-item selected">Item 1</a>
+    <a href="#url" role="tab" title="Item 2" class="UnderlineNav-item">Item 2</a>
+    <a href="#url" role="tab" title="Item 3" class="UnderlineNav-item">Item 3</a>
+    <a href="#url" role="tab" title="Item 4" class="UnderlineNav-item">Item 4</a>
+  </div>
+</nav>
+```
+
+`.UnderlineNav--right` also works with when used with `.UnderlineNav-actions`.
+
+```html title="UnderlineNav--right with actions"
+<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
+  <div class="UnderlineNav-actions">
+    <a class="btn">Button</a>
+  </div>
+  <div class="UnderlineNav-body">
+    <a href="#url" class="UnderlineNav-item selected">Item 1</a>
+    <a href="#url" class="UnderlineNav-item">Item 2</a>
+    <a href="#url" class="UnderlineNav-item">Item 3</a>
+    <a href="#url" class="UnderlineNav-item">Item 4</a>
+  </div>
+</nav>
+```
+
+<!-- Update wording here -->
+`.Counters` and `.octicons` can be used with navigation items. Use `.UnderlineNav-octicon` to add color and hover styles.
+
+```html title="UnderlineNav with Counter"
+<nav class="UnderlineNav" aria-label="Foo bar">
+  <div class="UnderlineNav-body">
+    <a href="#url" class="UnderlineNav-item selected">
+      <%= octicon "tools", :class => "UnderlineNav-octicon" %>
+      Item 1
+    </a>
+    <a href="#url" class="UnderlineNav-item">
+      <%= octicon "tools", :class => "UnderlineNav-octicon" %>
+      Item 2
+      <span class="Counter">10</span>
+     </a>
+     <a href="#url" class="UnderlineNav-item">
+       <%= octicon "tools", :class => "UnderlineNav-octicon" %>
+       Item 3
+    </a>
+    <a href="#url" class="UnderlineNav-item">
+      <%= octicon "tools", :class => "UnderlineNav-octicon" %>
+      Item 4
+     </a>
+  </div>
+</nav>
+```
+
+Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNav-container` to make navigation fill the width of the container.
+
+```html title="UnderlineNav--full"
+<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar">
+  <div class="container-lg UnderlineNav-container">
+    <div class="UnderlineNav-body">
+      <a href="#url" class="UnderlineNav-item selected">Item 1</a>
+      <a href="#url" class="UnderlineNav-item">Item 2
+        <span class="Counter">10</span>
+       </a>
+      <a href="#url" class="UnderlineNav-item">Item 3</a>
+      <a href="#url" class="UnderlineNav-item">Item 4</a>
+    </div>
+    <div class="UnderlineNav-actions">
+      <a class="btn">Button</a>
+    </div>
+  </div>
+</nav>
+```
 
 ## Tabnav
 
 When you need to toggle between different views, consider using a tabnav. It'll given you a left-aligned horizontal row of... tabs!
 
-```html
+```html title="tabnav"
 <div class="tabnav">
   <nav class="tabnav-tabs" aria-label="Foo bar">
     <a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab</a>
@@ -109,7 +215,7 @@ When you need to toggle between different views, consider using a tabnav. It'll
 
 Use `.float-right` to align additional elements in the `.tabnav`:
 
-```html
+```html title="tabnav with buttons"
 <div class="tabnav">
   <a class="btn btn-sm float-right" href="#url" role="button">Button</a>
   <nav class="tabnav-tabs" aria-label="Foo bar">
@@ -121,7 +227,7 @@ Use `.float-right` to align additional elements in the `.tabnav`:
 
 Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`:
 
-```html
+```html title="tabnav-extra"
 <div class="tabnav">
   <div class="tabnav-extra float-right">
     Tabnav widget text here.
@@ -133,7 +239,7 @@ Additional bits of text and links can be styled for optimal placement with `.tab
 </div>
 ```
 
-```html
+```html title="tabnav with everything"
 <div class="tabnav">
   <div class="float-right">
     <a class="tabnav-extra" href="#url">
@@ -154,7 +260,7 @@ Additional bits of text and links can be styled for optimal placement with `.tab
 
 A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
 
-```html
+```html title="filter-list"
 <ul class="filter-list">
   <li>
     <a href="#url" class="filter-item selected" aria-current="page">
@@ -180,7 +286,7 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
 
 `.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
 
-```html
+```html title="subnav"
 <nav class="subnav" aria-label="Respository">
   <a href="#url" class="subnav-item selected" aria-current="page">Item 1</a>
   <a href="#url" class="subnav-item">Item 2</a>
@@ -190,7 +296,7 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
 
 You can have `subnav-search` in the subnav bar.
 
-```html
+```html title="subnav-search"
 <div class="subnav">
   <nav class="subnav-links" aria-label="Repository">
     <a href="#url" class="subnav-item selected" aria-current="page">Item 1</a>
@@ -207,7 +313,7 @@ You can have `subnav-search` in the subnav bar.
 
 You can also use a `subnav-search-context` to display search help in a select menu.
 
-```html
+```html title="subnav-search-context"
 <div class="subnav">
   <nav class="subnav-links">
     <a href="#url" class="subnav-item selected">Item 1</a>
@@ -244,6 +350,8 @@ You can also use a `subnav-search-context` to display search help in a select me
   </div>
 </div>
 ```
+
+
 <!-- %enddocs -->
 
 ## License
diff --git a/modules/primer-navigation/index.scss b/modules/primer-navigation/index.scss
@@ -4,3 +4,4 @@
 @import "./lib/tabnav.scss";
 @import "./lib/filter-list.scss";
 @import "./lib/subnav.scss";
+@import "./lib/underline-nav.scss";
diff --git a/modules/primer-navigation/lib/underline-nav.scss b/modules/primer-navigation/lib/underline-nav.scss
@@ -0,0 +1,72 @@
+.UnderlineNav {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid $gray-200;
+}
+
+.UnderlineNav-body {
+  display: flex;
+  margin-bottom: -1px;
+}
+
+.UnderlineNav-item {
+  padding: $spacer-3 $spacer-2;
+  margin-right: $spacer-3;
+  font-size: $body-font-size;
+  line-height: $lh-default;
+  color: $text-gray;
+  text-align: center;
+  border-bottom: 2px solid transparent;
+
+  &:hover,
+  &:focus {
+    color: $text-gray-dark;
+    text-decoration: none;
+    border-bottom-color: $gray-300;
+    transition: 0.2s ease;
+
+    .UnderlineNav-octicon {
+      color: $gray-500;
+    }
+  }
+
+  &.selected {
+    font-weight: $font-weight-bold;
+    color: $text-gray-dark;
+    border-bottom-color: $orange-600;
+
+    .UnderlineNav-octicon {
+      color: $gray-500;
+    }
+  }
+}
+
+.UnderlineNav--right {
+  justify-content: flex-end;
+
+  .UnderlineNav-item {
+    margin-right: 0;
+    margin-left: $spacer-3;
+  }
+
+  .UnderlineNav-actions {
+    flex: 1 1 auto;
+  }
+}
+
+.UnderlineNav-actions {
+  align-self: center;
+}
+
+.UnderlineNav--full {
+  display: block;
+}
+
+.UnderlineNav-octicon {
+  color: $gray-400;
+}
+
+.UnderlineNav-container {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/modules/primer-navigation/stories.js b/modules/primer-navigation/stories.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
+
+const stories = storiesOf('Navigation', module)
+
+storiesFromMarkdown(require.context('.', true, /\.md$/))
+  .forEach(({title, story}) => {
+    stories.add(title, story)
+  })
