feat: make navigation style configurable

packages/mandelbrot/src/theme.js

@@ -8,6 +8,7 @@ const packageJSON = require('../package.json');
 module.exports = function (options) {
     const config = _.defaultsDeep(_.clone(options || {}), {
         skin: 'default',
+        navigation: 'default',
         rtl: false,
         lang: 'en',
         styles: 'default',

packages/mandelbrot/views/macros/navigation.nunj

@@ -18,7 +18,7 @@
 {% macro leaves(items, root, current, depth, request) %}
     {% for item in items %}
         {% set isNotCollated = (item.isComponent and not item.isCollated and item.variants().filter('isHidden', false).size > 1) %}
-        {% if item.isCollection %}
+        {% if item.isCollection or (frctl.theme.get('navigation') != 'split' and isNotCollated) %}
             {# skip root collections because they are pulled out of the tree #}
             {% if not (item.isCollection and item.isRoot) %}
             <li class="Tree-item Tree-collection Tree-depth-{{ depth }}" data-behaviour="collection" id="tree-{{ root.name }}-collection-{{ item.handle }}">
@@ -36,10 +36,18 @@
             </li>
             {% endif %}
         {% else %}
-        {% set urlItem = item.variants().filter('isHidden', false).first() if isNotCollated else item %}
-        {% set isCurrent = true if (current and (current.id == item.id) or (current.parent.id == item.id)) else false %}
+        {% set urlItem = item.variants().filter('isHidden', false).first() if (isNotCollated and frctl.theme.get('navigation') == 'split') else item %}
+        {% set isCurrent = true if (current and (current.id == item.id) or (current.parent.id == item.id and frctl.theme.get('navigation') == 'split')) else false %}
         <li class="Tree-item Tree-entity{% if isCurrent %} is-current{% endif %}"{% if isCurrent %} data-state="current"{% endif %} data-role="item">
-            <a class="Tree-entityLink" href="{{ path( (urlItem | url), request) }}" data-role="tree-link"{% if item.tags and item.tags.length > 1 %} data-tags="{{ item.tags | dump | replace("null,", "") | escape  }}"{% endif %} data-pjax data-handle="{{ item.handle if item.isComponent else item.parent.handle }}">
+            <a
+                class="Tree-entityLink"
+                href="{{ path( (urlItem | url), request) }}"
+                data-role="tree-link"
+                {% if item.tags and item.tags.length > 1 %} data-tags="{{ item.tags | dump | replace("null,", "") | escape  }}"{% endif %}
+                data-pjax
+                data-test="{{ item.handle }}"
+                data-handle="{{ item.handle if (item.isComponent or frctl.theme.get('navigation') != 'split') else item.parent.handle }}"
+            >
                 <span>{{ item.label }}</span>
                 {% if item.status %}{{ status.unlabelled(item.status) }}{% endif %}
             </a>

packages/mandelbrot/views/partials/browser/panel-info.nunj

@@ -14,6 +14,25 @@
             </span>
         </li>
         {% endif %}
+        {% if frctl.theme.get('navigation') != 'split' %}
+        {% if entity.isComponent %}
+        {% set variants = entity.variants().filter('isHidden', false) %}
+        {% else %}
+        {% set variants = entity.parent.variants().filter('isHidden', false) %}
+        {% endif %}
+        {% if variants.size > 1 %}
+        <li class="Meta-item">
+            <strong class="Meta-key">{{ frctl.theme.get('labels.components.variants') }} <em class="Meta-count">({{ variants.size }})</em>:</strong>
+            <span class="Meta-value Meta-value--linkList">
+            {% for variant in variants.items() %}
+                <a href="{{ path(frctl.theme.urlFromRoute('component', { handle: variant.handle })) }}">
+                    <span>{{ variant.label }}</span>
+                </a>{% if not loop.last %}, {% endif %}
+            {% endfor %}
+            </span>
+        </li>
+        {% endif %}
+        {% endif %}
         <li class="Meta-item">
             <strong class="Meta-key">{{ frctl.theme.get('labels.components.preview.label') }}:</strong>
             <span class="Meta-value">

packages/mandelbrot/views/partials/header.nunj

@@ -8,4 +8,5 @@
         </div>
     </button>
     <a href="{{ path('/') }}" class="Header-title" data-pjax>{{ frctl.get('project.title') | default('Component Library') }}</a>
+    navigation type: {{ frctl.theme.get('navigation') }}
 </div>

packages/mandelbrot/views/partials/navigation/navigation.nunj

@@ -1,7 +1,7 @@
 {% set isVariantPanelVisible = false %}
 {% if entity and (entity.isComponent or entity.isVariant) %}
     {% set item = entity.parent if entity.isVariant else entity %}
-    {% if item.variants().filter('isHidden', false).size > 1 %}
+    {% if item.variants().filter('isHidden', false).size > 1 and frctl.theme.get('navigation') == 'split' %}
         {% set isVariantPanelVisible = true %}
     {% endif %}
 {% endif %}
@@ -13,6 +13,7 @@
     {% endfor %}
     </div>
 
+    {% if frctl.theme.get('navigation') == 'split' %}
     <div class="Navigation-panel Navigation-panel--variants{% if isVariantPanelVisible %} is-visible{% endif %}" data-role="variant-panel">
         <div class="Navigation-backButtonWrapper">
             <button class="Navigation-backButton" data-role="back" type="button">
@@ -22,4 +23,5 @@
         </div>
         {% include 'partials/navigation/variants.nunj' %}
     </div>
+    {% endif %}
 </nav>