Skip to content

Refactor underline nav #377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Nov 7, 2017
Merged

Refactor underline nav #377

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ce1a6f8
Add underline nav styles and import file
ampinsk Oct 20, 2017
67fe320
Add octicon styles to prototype
ampinsk Oct 20, 2017
346992a
Add prototyping cases
ampinsk Oct 20, 2017
ca5a104
Add docs
ampinsk Oct 20, 2017
936a8fe
Move underline nav section in docs
ampinsk Oct 23, 2017
ad5fa52
Merge branch 'release-10.0.0' into underline-nav
jonrohan Oct 27, 2017
36565dc
Linting fixes
jonrohan Oct 27, 2017
f6dde1e
Using storiesfrommarkdown
jonrohan Oct 28, 2017
43b8b8e
Publish alpha release any time we're not on a release branch or master
jonrohan Nov 2, 2017
f85d54c
Add support for all container classes; add support for right + actions
ampinsk Nov 3, 2017
84efc60
Merge branch 'underline-nav' of https://github.com/primer/primer-css …
ampinsk Nov 3, 2017
573b961
Fix spacing
ampinsk Nov 3, 2017
921fef6
Update docs
ampinsk Nov 3, 2017
80f0616
Update naming and docs
ampinsk Nov 6, 2017
751b999
Remove mr-1 from octicon component style
ampinsk Nov 6, 2017
8336983
Update docs
ampinsk Nov 6, 2017
d7d54d5
Merge branch 'release-10.0.0' into underline-nav
jonrohan Nov 6, 2017
f270f97
Update docs
ampinsk Nov 7, 2017
0ffc472
Merge branch 'underline-nav' of https://github.com/primer/primer-css …
ampinsk Nov 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Using storiesfrommarkdown
  • Loading branch information
@jonrohan
jonrohan committed Oct 28, 2017
commit f6dde1e1da6d841237561316229224e3a6c52d62
18 changes: 17 additions & 1 deletion .storybook/lib/storiesFromMarkdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,27 @@ import select from 'unist-util-select'
import findBefore from 'unist-util-find-before'
import htmlToReact from 'html-to-react'
import parsePairs from 'parse-pairs'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import {Octicon} from '../Octicon'

const htmlParser = new htmlToReact.Parser()

const railsOcticonToReact = (html) => {
// <%= octicon "tools" %> to <Octicon name="tools" />
const octre = /<%= octicon ["']([a-z\-]+)["'] %>/gi
html = html.replace(octre, (match, name) => {
return ReactDOMServer.renderToStaticMarkup(<Octicon name={name} />)
})
return html
}

const isValidNode = () => {
return true;
}

const nodeToStory = (node, file) => {
const html = node.value
let html = railsOcticonToReact(node.value)
const element = htmlParser.parse(html)
const pairs = node.lang.replace(/^html\s*/, '')
const attrs = pairs.length ? parsePairs(pairs) : {}
Expand Down
72 changes: 41 additions & 31 deletions modules/primer-navigation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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" %>
Expand All @@ -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>
Expand All @@ -97,50 +97,60 @@ You can also add optional headings to a menu. Feel free to use nearly any semant

`.UnderlineNav` is navigation that is typically used at the top of a page as the main page navigation.
Copy link
Contributor

@broccolini broccolini Nov 4, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be worded better, it says navigation twice and descriptions could be a little more helpful. Suggest something like this but feel free to edit:

Use UnderlineNav to style navigation with a minimal underlined selected state. This component comes with variations to accommodate icons, counters, and button actions; and is typically used for navigation placed at the top of the page.


```html

<nav class="UnderlineNav" aria-label="Foo bar">
```html title="UnderlineNav"
<nav class="UnderlineNav">
<div class="UnderlineNav-items">
<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>
<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>
```

You can right align the navigation.

```html
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
```html title="UnderlineNav--right"
<nav class="UnderlineNav UnderlineNav--right">
<div class="UnderlineNav-items">
<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>
<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>
```


The navigation will work with added counters and/or octicons
Copy link
Contributor

@broccolini broccolini Nov 4, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, use a more commanding tone, such as:

Counters and octicons can be used with navigation items:


```html
```html title="UnderlineNav with Counter"
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-items">
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
<a href="#url" class="UnderlineNav-item">Item 2
<a href="#url" class="UnderlineNav-item selected">
<%= octicon "tools" %>
Item 1
</a>
<a href="#url" class="UnderlineNav-item">
<%= octicon "tools" %>
Item 2
<span className="Counter">10</span>
</a>
<a href="#url" class="UnderlineNav-item">Item 3</a>
<a href="#url" class="UnderlineNav-item">Item 4</a>
<a href="#url" class="UnderlineNav-item">
<%= octicon "tools" %>
Item 3
</a>
<a href="#url" class="UnderlineNav-item">
<%= octicon "tools" %>
Item 4
</a>
</div>
</nav>
```

Use `.UnderlineNav--full` to use a container within the components
Copy link
Contributor

@broccolini broccolini Nov 4, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggesting change wording to something like:

Use UnderlineNav--full in combination with container styles to make navigation fill the width of the container.

I couldn't find a way to avoid using "container" twice but I think it's okay.


```html
```html title="UnderlineNav--full"
<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar">
<div class="container-lg">
<div class="UnderlineNav-items">
Expand All @@ -157,7 +167,7 @@ Use `.UnderlineNav--full` to use a container within the components

Use `.UnderlineNav-actions` to use another element alongside the underline nav

```html
```html title="UnderlineNav-actions"
<nav class="UnderlineNav" aria-label="Foo bar">
<div class="UnderlineNav-items">
<a href="#url" class="UnderlineNav-item selected">Item 1</a>
Expand All @@ -178,7 +188,7 @@ Use `.UnderlineNav-actions` to use another element alongside the underline nav

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>
Expand All @@ -189,7 +199,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">
Expand All @@ -201,7 +211,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.
Expand All @@ -213,7 +223,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">
Expand All @@ -234,7 +244,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">
Expand All @@ -260,7 +270,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>
Expand All @@ -270,7 +280,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>
Expand All @@ -287,7 +297,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>
Expand Down
Loading