From 230700e1cf3b95e747e6cc6cad6b7263cb64b327 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves1.gatesoupe@orange.com>
Date: Tue, 31 May 2016 11:24:00 +0200
Subject: [PATCH] fix(component): local navigation

updated brand design
inverse version
---
 .../_includes/boostwatch/navLocal.html        |  97 ++-------
 docs-orange/components/local-navigation.md    |  96 +++------
 docs-orange/examples/orange-news/index.html   |  41 ++--
 scss/_o-nav-local.scss                        | 184 +++---------------
 scss/_o-nav.scss                              |   1 -
 5 files changed, 99 insertions(+), 320 deletions(-)

diff --git a/docs-orange/_includes/boostwatch/navLocal.html b/docs-orange/_includes/boostwatch/navLocal.html
index 590e8e3b32..20f196b660 100644
--- a/docs-orange/_includes/boostwatch/navLocal.html
+++ b/docs-orange/_includes/boostwatch/navLocal.html
@@ -2,86 +2,31 @@ <h2 id="local">Local navigation bar</h2>
 <p class="lead">Two types of local navigation.</p>
 <h3 id="local1">Default local navigation</h3>
 <div data-example-id="">
-    <div class="container-fluid">
-        <div class="row">
-            <nav class="navbar nav-local">
-                <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#exCollapsingNavbar1">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                </button>
-
-                <div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar1">
-                    <ul class="nav navbar-nav">
-                        <li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
-                        <li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
-                        <li class="nav-item dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu1">Dropdown <b class="caret" aria-hidden="true"></b></a>
-                        <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-                            <a href="#" role="menuitem" class="dropdown-item">Action</a>
-                            <a href="#" role="menuitem" class="dropdown-item">Another action</a>
-                            <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
-                            <div class="dropdown-divider"></div>
-                            <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
-                        </div>
-                        </li>
-                    </ul>
-                    <ul class="nav navbar-nav pull-md-right">
-                        <li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
-                        <li class="nav-item dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu2">Dropdown <b class="caret" aria-hidden="true"></b></a>
-                        <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
-                            <a href="#" role="menuitem" class="dropdown-item">Action</a>
-                            <a href="#" role="menuitem" class="dropdown-item">Another action</a>
-                            <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
-                            <div class="dropdown-divider"></div>
-                            <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
-                        </div>
-                        </li>
-                    </ul>
-                </div>
-            </nav>
-        </div>
+    <div class="o-nav-local">
+        <hr>
+        <nav class="container">
+            <ul class="nav nav-inline">
+                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
+                <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
+                <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
+            </ul>
+        </nav>
+        <hr>
     </div>
 </div>
-
-<h3 id="local2">Two levels local navigation</h3>
+<h3 id="local2">Inversed local navigation</h3>
 <div data-example-id="">
-    <div class="container-fluid">
-        <div class="row">
-            <nav class="navbar nav-local">
-                <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#exCollapsingNavbar2">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                </button>
-
-                <div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar2">
-                    <ul class="nav navbar-nav">
-                        <li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
-                        <li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
-                    </ul>
-                    <ul class="nav navbar-nav pull-md-right">
-                        <li class="nav-item dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu5">Dropdown <b class="caret" aria-hidden="true"></b></a>
-                            <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu5">
-                                <a href="#" role="menuitem" class="dropdown-item">Action</a>
-                                <a href="#" role="menuitem" class="dropdown-item">Another action</a>
-                                <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
-                                <div role="presentation" class="dropdown-divider"></div>
-                                <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-
-                <div class="navbar-collapse sublocal">
-                    <ul class="nav navbar-nav">
-                        <li class="nav-item"><a class="nav-link" href="#">Natus error sit<div class='arrow' aria-hidden='true'></div></a></li>
-                        <li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
-                        <li class="nav-item"><a class="nav-link active" href="#">Totam rem aperiam<div class='arrow' aria-hidden='true'></div></a></li>
-                        <li class="nav-item"><a class="nav-link" href="#">Sed ut<div class='arrow' aria-hidden='true'></div></a></li>
-                    </ul>
-                </div>
+    <div style="margin: 2rem 0; padding: 2rem 0; background-color: black;">
+        <div class="o-nav-local inverse">
+            <hr>
+            <nav class="container">
+                <ul class="nav nav-inline">
+                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
+                <li class="nav-item"><a class="nav-link active" href="#">Profile</a></li>
+                <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
+                </ul>
             </nav>
+            <hr>
         </div>
     </div>
 </div>
diff --git a/docs-orange/components/local-navigation.md b/docs-orange/components/local-navigation.md
index 71ffa21c7c..3be3c8ff00 100644
--- a/docs-orange/components/local-navigation.md
+++ b/docs-orange/components/local-navigation.md
@@ -6,82 +6,38 @@ group: components
 
 ## Default local navigation
 
-Add the `.nav-local` class to the nav tag, `.local` onto the nav links content, and a `div` tag with the class `arrow` with the `attribute aria-hidden='true'` to switch from classic navbar to Orange local navigation.
+Wrap your `<ul>` list in a `<nav>` tag with `.container` class. Use `<hr>` tag on top and bottom outside the de `.container`. Wrap the whole in a `.o-nav-local` container.
 
 {% example html %}
-<nav class="navbar nav-local">
-    <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#exCollapsingNavbar1">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-    </button>
-
-    <div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar1">
-        <ul class="nav navbar-nav">
-            <li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
-            <li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
-            <li class="nav-item dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu1">Dropdown <b class="caret" aria-hidden="true"></b></a>
-            <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-                <a href="#" role="menuitem" class="dropdown-item">Action</a>
-                <a href="#" role="menuitem" class="dropdown-item">Another action</a>
-                <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
-                <div class="dropdown-divider"></div>
-                <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
-            </div>
-            </li>
-        </ul>
-        <ul class="nav navbar-nav pull-md-right">
-            <li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
-            <li class="nav-item dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu2">Dropdown <b class="caret" aria-hidden="true"></b></a>
-            <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
-                <a href="#" role="menuitem" class="dropdown-item">Action</a>
-                <a href="#" role="menuitem" class="dropdown-item">Another action</a>
-                <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
-                <div class="dropdown-divider"></div>
-                <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
-            </div>
-            </li>
+ <div class="o-nav-local">
+    <hr>
+    <nav class="container">
+        <ul class="nav nav-inline">
+            <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
         </ul>
-    </div>
-</nav>
+    </nav>
+    <hr>
+</div>
 {% endexample %}
 
-## Two level local navigation
-
-{% example html %}
-<nav class="navbar nav-local">
-    <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#exCollapsingNavbar2">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-    </button>
+## Inverse local navigation
 
-    <div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar2">
-        <ul class="nav navbar-nav">
-            <li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
-            <li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
-        </ul>
-        <ul class="nav navbar-nav pull-md-right">
-            <li class="nav-item dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu3">Dropdown <b class="caret" aria-hidden="true"></b></a>
-                <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
-                    <a href="#" role="menuitem" class="dropdown-item">Action</a>
-                    <a href="#" role="menuitem" class="dropdown-item">Another action</a>
-                    <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
-                    <div role="presentation" class="dropdown-divider"></div>
-                    <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
-                </div>
-            </li>
-        </ul>
-    </div>
+Simply add `.inverse` class to your `.o-nav-local` container.
 
-    <div class="navbar-collapse sublocal">
-        <ul class="nav navbar-nav">
-            <li class="nav-item"><a class="nav-link" href="#">Natus error sit<div class='arrow' aria-hidden='true'></div></a></li>
-            <li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#">Totam rem aperiam<div class='arrow' aria-hidden='true'></div></a></li>
-            <li class="nav-item"><a class="nav-link" href="#">Sed ut<div class='arrow' aria-hidden='true'></div></a></li>
-        </ul>
+{% example html %}
+<div style="margin: 2rem 0; padding: 2rem 0; background-color: black;">
+    <div class="o-nav-local inverse">
+        <hr>
+        <nav class="container">
+            <ul class="nav nav-inline">
+                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
+            <li class="nav-item"><a class="nav-link active" href="#">Profile</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
+            </ul>
+        </nav>
+        <hr>
     </div>
-</nav>
+</div>
 {% endexample %}
diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html
index cbed969e1d..95d4609eb0 100644
--- a/docs-orange/examples/orange-news/index.html
+++ b/docs-orange/examples/orange-news/index.html
@@ -191,14 +191,30 @@ <h3 id="list_title_2"><a href="#">Mobile</a></h3>
             </div>
         </div>
 
-        <main class="container" id="content">
-            <div id="header" class="container">
-                <div class="row">
-                    <h1 id="hide_supra_trigger">News</h1>
-                </div>
-            </div>
+        <main id="content">
+            <section class="container">
+	            <h1>News</h1>
+            </section>
+
+			 <div class="o-nav-local">
+				<hr>
+				<nav class="container">
+					<ul class="nav nav-inline">
+						<li class="nav-item"><a class="nav-link active" href="#">news home</a></li>
+						<li class="nav-item"><a class="nav-link" href="#">world</a></li>
+						<li class="nav-item"><a class="nav-link" href="#">entertainment</a></li>
+						<li class="nav-item"><a class="nav-link" href="#">finance</a></li>
+						<li class="nav-item"><a class="nav-link" href="#">technology</a></li>
+						<li class="nav-item"><a class="nav-link" href="#">weather</a></li>
+						<li class="nav-item"><a class="nav-link" href="#">sport</a></li>
+						<li class="nav-item"><a class="nav-link" href="#">video</a></li>
+						<li class="nav-item"><a class="nav-link" href="#">pictures</a></li>
+					</ul>
+				</nav>
+				<hr>
+			</div>
 
-            <div id="localNavigation" class="container">
+            <!--<div id="localNavigation" class="container">
 			<nav  class="navbar nav-local">
 				<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
 					<span class="sr-only">toggle navigation</span>
@@ -231,10 +247,11 @@ <h1 id="hide_supra_trigger">News</h1>
 							</ul>
 						</li>
 					</ul>
-				</div><!-- /.navbar-collapse -->
+				</div>
 			</nav>
-		</div>
+		</div>-->
 
+		<section class="container">
 			<div class="row">
 				<div class="col-xs-12 col-sm-12 col-md-8">
 					<h2 id="newsLeaderTitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit<small>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</small></h2>
@@ -492,10 +509,10 @@ <h4 class="panel-title">
 					</div><!-- fin de la div accordéon -->
 				</div><!--fin de la div de 4 colonnes -->
 			</div><!-- fin de la row globale-->
+		</section>
+		<hr>
 
-			<hr>
-
-		</main><!--/.container-->
+		</main>
 
 		<footer id="footer" role="contentinfo">
 			<div class="container">
diff --git a/scss/_o-nav-local.scss b/scss/_o-nav-local.scss
index db46220573..fa67220602 100644
--- a/scss/_o-nav-local.scss
+++ b/scss/_o-nav-local.scss
@@ -2,181 +2,43 @@
 //      Nav local
 //
 
-// mixin for arrows
-@mixin arrow-generic($arrow-outer-width, $arrow-width) {
-  >.nav-item > .nav-link.active > .arrow {
-    &,
-    &::after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-
-  >.nav-item > .nav-link.active > .arrow {
-    border-width: $arrow-outer-width;
-  }
-
-  >.nav-item > .nav-link.active > .arrow::after {
-    content: "";
-    border-width: $arrow-width;
-  }
-}
-
-@mixin arrow-bottom($arrow-outer-width, $arrow-outer-height, $arrow-width, $arrow-outer-color, $arrow-color, $focus-color) {
-  @include arrow-generic($arrow-outer-width, $arrow-width);
-  >.nav-item > .nav-link.active > .arrow {
-    bottom: $arrow-outer-height;
-    left: 50%;
-    margin-left: -$arrow-outer-width;
-    border-top-color: $arrow-outer-color;
-    border-bottom-width: 0;
+.o-nav-local {
+  margin-bottom: $spacer;
 
-    &::after {
-      bottom: 1px;
-      margin-left: -$arrow-width;
-      content: " ";
-      border-top-color: $arrow-color;
-      border-bottom-width: 0;
-    }
+  hr {
+    border: 1px solid $gray-light;
+    margin: 0;
+    padding: 0;
   }
 
-  >.nav-item > .nav-link.active a:focus {
-    border-color: $focus-color;
-
-    +.arrow {
-      border-top-color: $arrow-outer-color;
+  .nav-link {
+    padding: 1.0625rem 0;
+    line-height: 1;
+    font-weight: bold;
 
-      &::after {
-        border-top-color: $focus-color;
-      }
+    &.active {
+      color: $brand-primary;
     }
   }
 }
 
-@mixin arrow-top($arrow-outer-width, $arrow-outer-height, $arrow-width, $arrow-outer-color, $arrow-color, $focus-color) {
-  @include arrow-generic($arrow-outer-width, $arrow-width);
+.o-nav-local.inverse {
+  background-color: black;
 
-  >.nav-item > .nav-link.active > .arrow {
-    bottom: $arrow-outer-height;
-    left: 50%;
-    margin-left: -$arrow-outer-width;
-    border-top-width: 0;
-    border-bottom-color: $arrow-outer-color;
-
-    &::after {
-      top: 1px;
-      margin-left: -$arrow-width;
-      content: " ";
-      border-top-width: 0;
-      border-bottom-color: $arrow-color;
-    }
-  }
-
-  >.nav-item > .nav-link.active a:focus {
-    border-color: $focus-color;
-
-    +.arrow {
-      border-bottom-color: $arrow-outer-color;
-
-      &::after {
-        border-bottom-color: $focus-color;
-      }
-    }
+  hr {
+    border: 1px solid $gray-dark;
   }
-}
-
-.nav-local {
-  min-height: 1em;
-  margin: 10px 20px;
-  background-color: #fff;
-
-  .local,
-  .sublocal {
-    @include clearfix();
-    padding: .625rem;
-    border-bottom: 1px solid $gray-light-o;
 
-    .navbar-nav {
-      @include arrow-top($nav-local-arrow-outer-width, 0, $nav-local-arrow-width, $nav-local-arrow-outer-color, $nav-local-arrow-color, $nav-local-arrow-color);
-      .nav-item + .nav-item {
-        margin-left: .9375rem;
-      }
-
-      .nav-item:first-child {
-        margin-left: 0;
-      }
-
-      > li {
-        position: relative;
-      }
-      .dropdown-menu {
-        margin-top: 0;
-      }
-    }
-    .nav-item > a,
-    .nav-item .nav-link {
-      display: inline-block;
-      height: 2.2em;
-      padding: .625rem 0;
-      margin-top: 0;
-      color: #000;
-
-      &.active,
-      &:hover,
-      &:focus {
-        color: $brand-primary;
-        background-color: transparent;
-      }
-
-      &:hover,
-      &:focus {
-        text-decoration: underline;
-      }
+  .nav-link {
+     @include hover-focus {
+      color: $brand-primary;
     }
-  }
-}
-
-.nav-local .container-fluid {
-  padding: 0;
-}
-
-.nav-local .container-fluid > .navbar-header,
-.nav-local .container-fluid > .navbar-collapse {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.nav-local .navbar-toggler {
-  margin-right: 20px;
-}
-
-
-@include media-breakpoint-down(sm) {
-  .nav-local .navbar-nav > li.active .arrow {
-    display: none !important;
-  }
-
-  .nav-local .navbar-toggler {
-    border-color: #000;
-  }
-
-  .nav-local .navbar-toggler .icon-bar {
-    background-color: #000;
-  }
 
-  .nav-local .open .dropdown-menu {
-    > a {
-      color: #000;
+    color: white;
+    background-color: black;
 
-      &:hover,
-      &:focus {
-        color: #fff;
-        background-color: #000;
-      }
+    &.active {
+      color: $brand-primary;
     }
   }
 }
diff --git a/scss/_o-nav.scss b/scss/_o-nav.scss
index e9a09ee5f2..c1884bc058 100644
--- a/scss/_o-nav.scss
+++ b/scss/_o-nav.scss
@@ -45,7 +45,6 @@
 
 .o-nav-tabs {
   @include box-shadow(0 5px 10px rgba(0, 0, 0, .2));
-  @include arrow-bottom($o-nav-tabs-arrow-outer-width, -$o-nav-tabs-arrow-outer-height, $o-nav-tabs-arrow-width, $o-nav-tabs-arrow-outer-color, $o-nav-tabs-arrow-color, $o-nav-tabs-arrow-color);
 
   position: relative;
   font-family: $font-family-base;