@ons/design-system 45.1.5 → 45.2.0

package/components/button/_macro.njk

@@ -49,7 +49,7 @@
         {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
         {% if params.name is defined and params.name and tag != "a" %}name="{{ params.name }}"{% elif params.name is defined and params.name and tag == "a" %}id="{{ params.name }}"{% endif %}
         {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}target="_blank" rel="noopener"{% endif %}
-        {% if params.buttonStyle == "download" %} download{% endif %}
+        {% if params.buttonStyle == "download" and (params.removeDownloadAttribute is not defined or not params.removeDownloadAttribute or params.removeDownloadAttribute != true) %} download{% endif %}
         {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
         >
         <span class="ons-btn__inner{% if params.innerClasses is defined and params.innerClasses %} {{ params.innerClasses }}{% endif %}">

package/components/question/_macro.njk

@@ -26,7 +26,6 @@
             {% from "components/collapsible/_macro.njk" import onsCollapsible %}
             {% call onsCollapsible({
                 "id": params.definition.id if params.definition.id is defined and params.definition.id else '',
-                "titleTag": 'h2',
                 "classes": 'ons-u-mb-m',
                 "title": params.definition.title if params.definition.title is defined and params.definition.title else ''
             }) %}
@@ -118,7 +117,6 @@
             {% from "components/collapsible/_macro.njk" import onsCollapsible %}
             {% call onsCollapsible({
                 "id": params.justification.id,
-                "titleTag": 'h2',
                 "classes": 'ons-u-mb-m',
                 "title": params.justification.title | default('Why we ask this question')
             }) %}

package/components/section-navigation/_macro.njk

@@ -1,9 +1,18 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
+  <nav class="ons-section-nav{% if params.variants is defined and params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
       <ul class="ons-section-nav__list" aria-label="{{ params.ariaListLabel | default("Section menu links") }}">
         {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
           <li class="ons-section-nav__item {{ item.classes }}{{ ' ons-section-nav__item--active' if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) }}">
             <a class="ons-section-nav__link" href="{{ item.url }}" {% if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) %} aria-current="location" {% endif %}>{{ item.title }}</a>
+              {% if item.anchors is defined and item.anchors %}
+                  <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
+                      {% for anchor in item.anchors %}
+                          <li class="ons-section-nav__item ons-list__item">
+                              <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                          </li>
+                      {% endfor %}
+                  </ul>
+              {% endif %}
           </li>
         {% endfor %}
       </ul>

package/components/section-navigation/_section-navigation.scss

@@ -1,5 +1,7 @@
 .ons-section-nav {
-  border-bottom: 1px solid $color-borders;
+  &:not(&--vertical) {
+    border-bottom: 1px solid $color-borders;
+  }
 
   &__list {
     list-style: none;
@@ -7,28 +9,61 @@
     padding: 0;
   }
 
+  &__link {
+    text-decoration: none;
+    &:hover {
+      color: $color-text-link-hover;
+      text-decoration: underline solid $color-text-link-hover 2px;
+    }
+  }
+
   &__item {
-    border-bottom: 4px solid transparent;
-    display: inline-block;
     font-size: 1rem;
-    margin: 0 1rem 0 0;
-    text-align: center;
-    &:hover,
+    padding: 0;
     &--active {
-      border-color: $color-night-blue;
+      border-left: 4px solid $color-text-link-active;
+      font-weight: $font-weight-bold;
+      margin-left: -18px;
+      padding-left: 14px;
       a {
-        color: $color-night-blue;
+        color: $color-text-link-active;
       }
     }
-    &--active {
-      font-weight: 700;
+    & & {
+      margin-bottom: 0.3rem;
     }
   }
 
-  &__link {
-    text-decoration: none;
-    &:hover {
+  &__sub-items {
+    a {
+      color: $color-text-link;
+      font-weight: $font-weight-regular;
+    }
+  }
+
+  &:not(&--vertical) & {
+    &__item {
+      border: none;
+      border-bottom: 4px solid transparent;
+      display: inline-block;
+      margin: 0 1rem 0 0;
+      text-align: center;
+      &--active,
+      &:hover {
+        border-color: $color-text-link-active;
+        margin: 0 1rem 0 0;
+        padding: 0;
+        a {
+          color: $color-text-link-active;
+        }
+      }
+    }
+
+    &__link {
       text-decoration: none;
+      &:hover {
+        text-decoration: none;
+      }
     }
   }
 }