@ons/design-system 61.0.1 → 61.0.3

package/components/access-code/_macro.njk

@@ -28,7 +28,7 @@
 
     {% if not params.error %}
         {% call onsPanel({
-            "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes)
+            "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes else '')
         }) %}
             {{ content | safe }}
         {% endcall %}

package/components/card/_card.scss

@@ -5,6 +5,12 @@
     text-decoration-thickness: 3px;
   }
 
+  &__title {
+    // This is to allow the focus state for multi lined title links to render the focus style correctly.
+    // This should be corrected when the typography scale is improved.
+    line-height: 1.65 !important;
+  }
+
   @include mq(m) {
     margin: 0;
     .ons-grid__col & {

package/components/pagination/_macro.njk

@@ -8,22 +8,8 @@
 
   {% set totalPages = params.pages | length %}
   {% set position = "Page " + currentPageIndex + " of " + totalPages %}
-
-  {# Calculate middle pages #}
-  {% set middlePageCount = 5 %}
-  {% set middlePagesEachSide = (middlePageCount - 1) / 2 %}
-
-  {% if (currentPageIndex - middlePagesEachSide) <= 1 %}
-      {% set middlePagesStart = 1 %}
-      {% set middlePagesEnd = middlePageCount - 1 %}
-  {% elif (currentPageIndex + middlePagesEachSide) >= totalPages %}
-      {% set middlePagesStart = totalPages - middlePageCount + 1 %}
-      {% set middlePagesEnd = totalPages %}
-  {% else %}
-      {% set middlePagesStart = currentPageIndex - middlePagesEachSide %}
-      {% set middlePagesEnd = currentPageIndex + middlePagesEachSide %}
-  {% endif %}
-
+  {% set lastPage = params.pages | last %}
+  {% set firstPage = params.pages | first %}
 
   <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
       <div class="ons-pagination__position">{{ position }}</div>
@@ -34,17 +20,23 @@
                   <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
               </li>
           {% endif %}
-          {% if currentPageIndex > 3 %}
-              {% set first = params.pages | first %}
-              <li class="ons-pagination__item">
-                  <a href="{{ first.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
-              </li>
+          {% if currentPageIndex > 2 %}
+            <li class="ons-pagination__item{% if firstPage.current == true %} ons-pagination__item--current{% endif %}">
+                <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
+            </li>
           {% endif %}
           {% if currentPageIndex > 4 %}
               <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 %}
+              {% set showPage = false %}
+              {# Show the current, next and previous page
+              Show page 2 if the current page index is within the first 4 pages
+              Show the penultimate page if the current page index is within the last 4 pages  #}
+              {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex + 1) or (loop.index == currentPageIndex - 1) or (loop.index == 2 and currentPageIndex <= 4) or ((loop.index == totalPages - 1) and (currentPageIndex > totalPages - 4)) %}
+                {% set showPage = true %}                    
+              {% endif %}
+              {% if showPage == true %}
                   <li class="ons-pagination__item{% if page.current == true %} ons-pagination__item--current{% endif %}">
                       <a href="{{ page.url }}" class="ons-pagination__link"
                           {%- if page.current -%}
@@ -65,11 +57,10 @@
           {% if currentPageIndex < totalPages - 3 %}
               <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
           {% endif %}
-          {% if currentPageIndex < totalPages - 2 %}
-              {% set lastPage = params.pages | last %}
-              <li class="ons-pagination__item">
-                  <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
-              </li>
+          {% if currentPageIndex < totalPages - 1 %}
+            <li class="ons-pagination__item{% if lastPage.current == true %} ons-pagination__item--current{% endif %}">
+                <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
+            </li>
           {% endif %}
           {% if totalPages > 1 and totalPages != currentPageIndex %}
               <li class="ons-pagination__item ons-pagination__item--next">

package/components/pagination/_macro.spec.js

@@ -251,16 +251,15 @@ describe('macro: pagination', () => {
       ).toBe('Page 2 of 6');
     });
 
-    it('has a 8 list items ("Previous page", "1", "2", "3", "4", "...", "6", "Next page")', () => {
-      expect($('li').length).toBe(8);
+    it('has 7 list items ("Previous page", "1", "2", "3", "...", "6", "Next page")', () => {
+      expect($('li').length).toBe(7);
       assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
       assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
       assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 6)', '2');
       assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
-      assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
-      assertIsGap($('.ons-pagination__item:nth-child(6)'));
-      assertIsOtherPage($('.ons-pagination__item:nth-child(7)'), '/page/6', 'Go to the last page (Page 6)', '6');
-      assertIsNextPage($('.ons-pagination__item:nth-child(8)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+      assertIsGap($('.ons-pagination__item:nth-child(5)'));
+      assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to the last page (Page 6)', '6');
+      assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
     });
   });
 
@@ -301,19 +300,17 @@ describe('macro: pagination', () => {
       ).toBe('Page 5 of 11');
     });
 
-    it('has a 11 list items ("Previous page", "1", "...", "3", "4", "5", "6", "7", "...", "11", "Next page")', () => {
-      expect($('li').length).toBe(11);
+    it('has a 9 list items ("Previous page", "1", "...", "4", "5", "6", "...", "11", "Next page")', () => {
+      expect($('li').length).toBe(9);
       assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Go to the previous page (Page 4)', 'Previous page');
       assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
       assertIsGap($('.ons-pagination__item:nth-child(3)'));
-      assertIsOtherPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
-      assertIsPreviousPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
-      assertIsCurrentPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Current page (Page 5 of 11)', '5');
-      assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/6', 'Go to page 6', '6');
-      assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/7', 'Go to page 7', '7');
-      assertIsGap($('.ons-pagination__item:nth-child(9)'));
-      assertIsOtherPage($('.ons-pagination__item:nth-child(10)'), '/page/11', 'Go to the last page (Page 11)', '11');
-      assertIsNextPage($('.ons-pagination__item:nth-child(11)'), '/page/6', 'Go to the next page (Page 6)', 'Next page');
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/4', 'Go to page 4', '4');
+      assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/5', 'Current page (Page 5 of 11)', '5');
+      assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to page 6', '6');
+      assertIsGap($('.ons-pagination__item:nth-child(7)'));
+      assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to the last page (Page 11)', '11');
+      assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/6', 'Go to the next page (Page 6)', 'Next page');
     });
   });
 
@@ -354,17 +351,15 @@ describe('macro: pagination', () => {
       ).toBe('Page 10 of 11');
     });
 
-    it('has a 9 list items ("Previous page", "1", "...", "7", "8", "9", "10", "11", "Next page")', () => {
-      expect($('li').length).toBe(9);
+    it('has a 7 list items ("Previous page", "1", "...", "9", "10", "11", "Next page")', () => {
+      expect($('li').length).toBe(7);
       assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Go to the previous page (Page 9)', 'Previous page');
       assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
       assertIsGap($('.ons-pagination__item:nth-child(3)'));
-      assertIsOtherPage($('.ons-pagination__item:nth-child(4)'), '/page/7', 'Go to page 7', '7');
-      assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/8', 'Go to page 8', '8');
-      assertIsPreviousPage($('.ons-pagination__item:nth-child(6)'), '/page/9', 'Go to page 9', '9');
-      assertIsCurrentPage($('.ons-pagination__item:nth-child(7)'), '/page/10', 'Current page (Page 10 of 11)', '10');
-      assertIsNextPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to page 11', '11');
-      assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/11', 'Go to the next page (Page 11)', 'Next page');
+      assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/9', 'Go to page 9', '9');
+      assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/10', 'Current page (Page 10 of 11)', '10');
+      assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/11', 'Go to page 11', '11');
+      assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/11', 'Go to the next page (Page 11)', 'Next page');
     });
   });
 });

package/components/section-navigation/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-label="{{ params.ariaLabel | default("Section menu") }}">
+  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-label="{{ params.ariaLabel | default("Section menu") }}">
       <ul class="ons-section-nav__list">
         {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
           {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}

package/components/section-navigation/_macro.spec.js

@@ -91,6 +91,12 @@ describe('macro: section-navigation', () => {
     expect($('.ons-section-nav').attr('id')).toBe('section-menu');
   });
 
+  it('has the provided custom `classes`', () => {
+    const $ = cheerio.load(renderComponent('section-navigation', { ...EXAMPLE_SECTION_NAVIGATION, classes: 'custom-class' }));
+
+    expect($('.ons-section-nav').hasClass('custom-class')).toBe(true);
+  });
+
   it('has the provided `ariaLabel` parameter', () => {
     const $ = cheerio.load(
       renderComponent('section-navigation', {

package/components/summary/_macro.njk

@@ -38,7 +38,7 @@
 
                                     {% for rowItem in row.rowItems %}
                                         <dl class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}"{% if rowItem.id %} id="{{ rowItem.id }}"{% endif %}>
-                                            <dt class="ons-summary__item-title{% if not rowItem.actions %} ons-summary__item-title--2{% endif %}"
+                                            <dt class="ons-summary__item-title"
                                                 {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                             >
                                                 {% if rowItem.iconType %}
@@ -63,7 +63,7 @@
                                             </dt>
                                             {% if rowItem.valueList %}
                                                 <dd
-                                                    class="ons-summary__values"
+                                                    class="ons-summary__values{% if not rowItem.actions %} ons-summary__values--2{% endif %}"
                                                     {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                                 >
                                                     {% if rowItem.valueList | length == 1 %}

package/components/summary/_summary.scss

@@ -178,7 +178,7 @@ $hub-row-spacing: 1.3rem;
     &__item-title,
     &__values,
     &__actions {
-      flex: 4;
+      flex: 5 1 33%;
       padding-top: $summary-row-spacing;
       vertical-align: top;
 
@@ -196,13 +196,8 @@ $hub-row-spacing: 1.3rem;
       align-self: flex-start;
     }
 
-    &__item-title,
-    &__values {
-      flex: 7.3;
-    }
-
-    &__item-title--2 {
-      flex: 4.5;
+    &__values--2 {
+      flex: 10.5 1 66%;
     }
 
     &--hub & {
@@ -211,10 +206,6 @@ $hub-row-spacing: 1.3rem;
       &__actions {
         padding-top: $hub-row-spacing;
       }
-
-      &__actions {
-        flex: 6;
-      }
     }
   }
 }