Add child .s-navigation--item-text element

This time without all the silly line ending noise!

Author: dancormier

docs/_data/navigation.json

@@ -30,6 +30,11 @@
       "applies": "Child of <code class=\"stacks-code\">.s-navigation</code>",
       "description": "The individual pill-shaped link in a navigation"
     },
+    {
+      "class": ".s-navigation--item-text",
+      "applies": "Child of <code class=\"stacks-code\">.s-navigation--item</code>",
+      "description": "The element meant to contain the text of the navigation item"
+    },
     {
       "class": ".is-selected",
       "applies": "<code class=\"stacks-code\">.s-navigation--item</code>",

docs/_includes/header.html

@@ -9,12 +9,16 @@
 
         {% if site-navigation %}
             <nav aria-label="Global" class="sm:d-none">
-                <ul class="s-navigation ml8 fw-nowrap sm:d-none">
+                <ul class="s-navigation ml8 fw-nowrap">
                     {% assign slug = page.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
 
                     {% for section in site-navigation.sections %}
                         {% assign url = section.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
-                        <li><a class="s-navigation--item{% if url == slug %} is-selected{% endif %}" href="{{ section.url }}" {% if url == slug %} aria-current="page"{% endif %}>{{ section.title }}</a></li>
+                        <li>
+                            <a class="s-navigation--item{% if url == slug %} is-selected{% endif %}" href="{{ section.url }}" {% if url == slug %} aria-current="page"{% endif %}>
+                                <span class="s-navigation--item-text" data-text="{{ section.title }}">{{ section.title }}</span>
+                            </a>
+                        </li>
                     {% endfor %}
                 </ul>
             </nav>

docs/_includes/navigation.html

@@ -3,13 +3,17 @@
         <div class="d-none sm:d-block">
             <div class="d-flex fd-column ai-center">
                 {% if site-navigation %}
-                    <nav class="s-navigation s-navigation__wrap mx8 mb12 jc-center" aria-label="Global">
-                        {% assign slug = page.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
+                    <nav aria-label="Global" class="sm:d-none">
+                        <ul class="s-navigation s-navigation__wrap mx8 mb12 jc-center">
+                            {% assign slug = page.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
 
-                        {% for section in site-navigation.sections %}
-                            {% assign url = section.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
-                            <a class="s-navigation--item{% if url == slug %} is-selected{% endif %}" href="{{ section.url }}">{{ section.title }}</a>
-                        {% endfor %}
+                            {% for section in site-navigation.sections %}
+                                {% assign url = section.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
+                                <a class="s-navigation--item{% if url == slug %} is-selected{% endif %}" href="{{ section.url }}">
+                                    <span class="s-navigation--item-text" data-text="{{ section.title }}">{{ section.title }}</span>
+                                </a>
+                            {% endfor %}
+                        </ul>
                     </nav>
                 {% endif %}
             </div>
@@ -30,7 +34,7 @@
                                 {% if section.links %}
                                     {% for link in section.links %}
                                         <a class="s-navigation--item {% if page.url == link.url %}is-selected{% endif %}" href="{{ link.url | url }}" {% if page.url == link.url %}aria-current="page"{% endif %}>
-                                            {{ link.title }}
+                                            <span class="s-navigation--item-text" data-text="{{ link.title }}">{{ link.title }}</span>
                                         </a>
                                     {% endfor %}
                                 {% endif %}

docs/_includes/topbar.html

@@ -22,23 +22,23 @@
                     {% if showFullNavigation %}
                         <li>
                             <a href="#" class="s-navigation--item">
-                                About
+                                <span class="s-navigation--item-text" data-text="About">About</span>
                             </a>
                         </li>
                         <li>
                             <a href="#" class="s-navigation--item is-selected">
-                                Products
+                                <span class="s-navigation--item-text" data-text="Products">Products</span>
                             </a>
                         </li>
                         <li>
                             <a href="#" class="s-navigation--item">
-                                For Teams
+                                <span class="s-navigation--item-text" data-text="For Teams">For Teams</span>
                             </a>
                         </li>
                     {% else %}
                         <li>
                             <a href="#" class="s-navigation--item">
-                                Products
+                                <span class="s-navigation--item-text" data-text="Products">Products</span>
                             </a>
                         </li>
                     {% endif %}