@ons/design-system 45.1.3 → 45.2.1

package/components/label/_macro.njk

@@ -1,14 +1,14 @@
 {% macro onsLabel(params) %}
-    {% set field %}
+    {% set field -%}
         <span
           {% if params.id is defined and params.id %} id="{{ params.id }}-description-hint"{% else %}id="description-hint"{% endif %}
           class="ons-label__description {% if params.inputType is defined and params.inputType %}ons-{{ params.inputType }}__label--with-description{% else %} ons-input--with-description{% endif %}">
-              {{ params.description }}
+              {{- params.description -}}
         </span>
-    {% endset %}
+    {%- endset %}
 
     <label
-        class="{% if params.inputType is not defined %}ons-label {% endif %}{{ params.classes if params.classes else "" }}{% if params.description is defined and params.description %} ons-label--with-description{% endif %} {{' ons-label--placeholder ' if params.accessiblePlaceholder else "" }}"
+        class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description is defined and params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
         {% if params.for is defined and params.for %} for="{{ params.for }}"{% endif %}
         {% if params.id is defined and params.id %} id="{{ params.id }}"{% 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 }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
@@ -16,17 +16,17 @@
 
         {{- params.text | safe -}}
 
-        {% if params.inputType is defined and params.inputType %}
-            {% if params.inputType == "checkbox" or params.inputType == "radio" %}
-                {%- if params.description is defined and params.description %}
-                    {{ field | safe }}
-                {% endif -%}
-            {% endif %}
+        {%- if params.inputType is defined and params.inputType -%}
+            {% if params.inputType == "checkbox" or params.inputType == "radio" -%}
+                {%- if params.description is defined and params.description -%}
+                    {{- field | safe -}}
+                {%- endif -%}
+            {%- endif -%}
             </label>
-        {% else %}
+        {%- else -%}
             </label>
-            {%- if params.description is defined and params.description %}
-                {{ field | safe }}
-            {% endif -%}
-        {% endif %}
+            {%- if params.description is defined and params.description -%}
+                {{- field | safe -}}
+            {%- endif -%}
+        {%- endif %}
 {% endmacro %}

package/components/lists/_macro.njk

@@ -70,7 +70,7 @@
                                 })
                             }}
                         {%- else -%}
-                            <a href="{{ item.url }}" class="ons-list__link {% if item.variant == 'inPageLink' %}ons-js-inpagelink {% endif %} {{ item.classes }}"{% if item.index is defined and item.index %} data-qa="list-item-{{ loop.index }}"{% endif %}{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.rel is defined and item.rel %} rel="{{ item.rel }}"{% endif %}>
+                            <a href="{{ item.url }}" class="ons-list__link {% if item.variants == 'inPageLink' %}ons-js-inpagelink {% endif %} {{ item.classes }}"{% if item.index is defined and item.index %} data-qa="list-item-{{ loop.index }}"{% endif %}{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.rel is defined and item.rel %} rel="{{ item.rel }}"{% endif %}>
                                 {%- if item.prefix is defined and item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
                                 {%- if item.target is defined and item.target == "_blank" -%}<span class="ons-u-vh">{{- item.screenreaderMessage | default("this link will open in a new tab") -}}</span>{%- endif -%}
                             </a>

package/components/pagination/_macro.njk

@@ -41,7 +41,7 @@
               </li>
           {% endif %}
           {% if currentPageIndex > 4 %}
-              <li class="ons-pagination__item ons-pageination__item--gap">&hellip;</li>
+              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
           {% endif %}
           {% for page in params.pages %}
               {% if loop.index >= middlePagesStart and loop.index <= middlePagesEnd %}
@@ -63,7 +63,7 @@
               {% endif %}
           {% endfor %}
           {% if currentPageIndex < totalPages - 3 %}
-              <li class="ons-pagination__item ons-pageination__item--gap">&hellip;</li>
+              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
           {% endif %}
           {% if currentPageIndex < totalPages - 2 %}
               {% set lastPage = params.pages | last %}

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;
+      }
     }
   }
 }

package/components/summary/_macro.njk

@@ -11,12 +11,12 @@
     {% endif %}
     <div class="{{ className }}">
         {% for summary in params.summaries %}
-            <div {% if group.id is defined and group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group">
-                {% if summary.summaryTitle is defined and summary.summaryTitle %}
-                    <h2 class="ons-summary__title ons-u-mb-m">{{ summary.summaryTitle }}</h2>
-                    {% set titleSize = "3" %}
-                {% endif %}
-                {% for group in summary.groups %}
+            {% if summary.summaryTitle is defined and summary.summaryTitle %}
+                <h2 class="ons-summary__title ons-u-mb-m">{{ summary.summaryTitle }}</h2>
+                {% set titleSize = "3" %}
+            {% endif %}
+            {% for group in summary.groups %}
+                <div {% if group.id is defined and group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group">
                     {% if group.groupTitle is defined and group.groupTitle %}
                         <h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
                     {% endif %}
@@ -122,8 +122,8 @@
                             <a {% if group.summaryLink.attributes is defined and group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
                         </div>
                     {% endif %}
-                {% endfor %}
-            </div>
+                </div>
+            {% endfor %}
         {% endfor %}
     </div>
 {% endmacro %}