Make template docs the default tab, and change the order of tabs (#272)

* Modify the tabs for the pattern so that the default tab is the "docs" tab

Also change the order of display of tabs so the template docs is the first tab - this reads more naturally, and makes more sense visually to have the left-hand tab be default.

* Display a default text when no docs is available

Shows "No template doc available" if there is no .md file or the file is empty.

---------

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
Co-authored-by: Helen Chapman <helen.chapman@torchbox.com>

Author: 3 people

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Changed
+
+- Swap position of template "docs" and "source" tabs, and make the "docs" tab the default ([#259](https://github.com/torchbox/django-pattern-library/issues/259))
+
 ### Removed
 
 - Drop support for Python 3.9

pattern_library/templates/pattern_library/index.html

@@ -25,28 +25,29 @@ <h4 class="heading heading--iframe-size js-iframe-size">
         <div class="tabbed-content">
             <ul class="tabbed-content__list">
                 <li class="tabbed-content__heading tabbed-content__heading--active">
-                    <a href="#tab-1">Template source</a>
+                    <a href="#tab-1">Template docs</a>
                 </li>
+
                 <li class="tabbed-content__heading">
                     <a href="#tab-2">Template config</a>
                 </li>
 
                 <li class="tabbed-content__heading">
-                    <a href="#tab-3">Template docs</a>
+                    <a href="#tab-3">Template source</a>
                 </li>
             </ul>
 
             <div class="tabbed-content__tabs">
                 <div id="tab-1" class="tabbed-content__item tabbed-content__item--active">
-                    <pre><code class="code django">{{ pattern_source }}</code></pre>
+{% if pattern_markdown %}<div class="md">{{ pattern_markdown|safe }}</div>{% else %}<div class="md">No template doc available.</div>{% endif %}
                 </div>
 
                 <div id="tab-2" class="tabbed-content__item">
                     <pre><code class="code yaml">{{ pattern_config }}</code></pre>
                 </div>
 
                 <div id="tab-3" class="tabbed-content__item">
-                    <div class="md">{{ pattern_markdown|safe }}</div>
+                    <pre><code class="code django">{{ pattern_source }}</code></pre>
                 </div>
             </div>
         </div>