#2862384 by peterpolman: Added styles for book navigation, updated ChANGELOG...

#2862384 by peterpolman: Added styles for book navigation, updated ChANGELOG and added the component to the styleguide.

CHANGELOG.md

+### v2.1.3 -- Apr 2017
+* Changed wave-effect styles.
+* Changed book navigation styles.
+
 ### v2.1.2 -- Mar 2017
 * Replaced Bootstrap list-group component with custom list component
 * Merge label component with badges and extend badge modifiers
@@ -35,5 +39,5 @@ Complete overhaul of theme_hooks and clean up of templates
 * Updated the way we override the bootstrap panel implementation for details and fieldsets. Updated corresponding template files
 * Merged container templates
 * Merged views templates
-* Merged form templates 
+* Merged form templates
 * Updated teaser templates

assets/css/nav-book.css

-.book-menu .list-item {
+.nav-book {
+  padding: 0;
+}
+
+.nav-book .menu-item {
   list-style: none;
-  padding-top: 6px;
-  padding-bottom: 6px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  clear: both;
+  padding-left: 1.25rem;
+  position: relative;
 }
 
-.book-menu .list-item--active-trail > a {
-  text-decoration: underline;
+.nav-book .menu-item:before {
+  content: '\25CB';
+  position: absolute;
+  left: 0;
+}
+
+.nav-book .menu-item.menu-item--collapsed:before {
+  content: '\25B8';
+}
+
+.nav-book .menu-item--expanded .menu {
+  padding-left: 0;
+}
+
+.nav-book .menu-item--expanded.menu-item--has-children:before {
+  content: '\25BE';
 }
 
 .navigation-book {
@@ -13,10 +34,6 @@
   font-size: 14px;
 }
 
-.navigation-book .book-menu {
-  padding-left: 66px;
-}
-
 .navigation-book a:hover {
   text-decoration: underline;
 }

assets/css/stream.css

@@ -32,7 +32,7 @@
 }
 
 .card--stream {
-  margin: 0 0 1.25rem 1.25rem;
+  margin-left: 1.25rem;
 }
 
 .card--stream:before, .card--stream:after {

components/03-molecules/navigation/nav-book/nav-book.scss

+// Nav book
+//
+// Styles for table of contents as provided bij the social_book module. Menu items have triangle icons indicating wether there are menu items below this item or not.
+// The highlighted path leads to the page title the user is currently viewing.
+//
+// markup: nav-book.twig
+//
+// Weight: 4
+//
+// Style guide: molecules.navigation.nav-book
+
+
 @import 'settings';
 
-.book-menu {
+.nav-book {
+  padding: 0;
 
-  .list-item {
+  .menu-item {
     list-style: none;
-    padding-top: 6px;
-    padding-bottom: 6px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    clear: both;
+    padding-left: 1.25rem;
+    position: relative;
+
+    &:before {
+      content: '\25CB';
+      position: absolute;
+      left: 0;
+    }
+
+    &.menu-item--collapsed:before {
+      content: '\25B8';
+    }
+
   }
 
-  .list-item--active-trail > a {
-    text-decoration: underline;
+  .menu-item--expanded .menu {
+    padding-left: 0;
+  }
+
+  .menu-item--expanded.menu-item--has-children:before {
+    content: '\25BE';
   }
 
 }
@@ -18,10 +49,6 @@
   padding: 0.5em 0;
   font-size: $font-size-small;
 
-  .book-menu {
-    padding-left: 66px;
-  }
-
   a:hover {
     text-decoration: underline;
   }

components/03-molecules/navigation/nav-book/nav-book.twig

+<ul block="block-booknavigation-2" class="nav-book">
+  <li class="menu-item menu-item--collapsed">
+    <a href="#">Lorem ipsum dolor sit amet</a>
+  </li>
+  <li class="menu-item menu-item--has-children menu-item--expanded menu-item--active-trail">
+    <a href="#">Lorem ipsum dolor sit amet sequitur sunt</a>
+    <ul class="menu">
+      <li class="menu-item menu-item--has-children menu-item--expanded menu-item--active-trail">
+        <a href="#">Lorem ipsum dolor sit amet</a>
+        <ul class="menu">
+          <li class="menu-item menu-item--active-trail">
+            <a href="#">Lorem ipsum.</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+  <li class="menu-item">
+    <a href="#">Lorem ipsum dolor sit amet</a>
+  </li>
+</ul>

templates/node/book/book-tree.html.twig

@@ -26,23 +26,26 @@
   We call a macro which calls itself to render the full tree.
   @see http://twig.sensiolabs.org/doc/tags/macro.html
 #}
-{{ book_tree.book_links(items, attributes, 0) }}
+<div class="card__block">
+  {{ book_tree.book_links(items, attributes, 0) }}
+</div>
 
 {% macro book_links(items, attributes, menu_level) %}
   {% import _self as book_tree %}
   {% if items %}
     {% if menu_level == 0 %}
-      <ul{{ attributes.addClass('book-menu') }}>
+      <ul{{ attributes.addClass('nav-book') }}>
     {% else %}
       <ul class="menu">
     {% endif %}
     {% for item in items %}
       {%
         set classes = [
-          'list-item',
-          item.is_expanded ? 'list-item--expanded',
-          item.is_collapsed ? 'list-item--collapsed',
-          item.in_active_trail ? 'list-item--active-trail',
+          'menu-item',
+          item.below ? 'menu-item--has-children',
+          item.is_expanded ? 'menu-item--expanded',
+          item.is_collapsed ? 'menu-item--collapsed',
+          item.in_active_trail ? 'menu-item--active-trail',
         ]
       %}
       <li{{ item.attributes.addClass(classes) }}>