@madgex/design-system 3.4.0 → 3.4.2

package/src/components/pagination-numbers/_template.njk

@@ -62,30 +62,22 @@ Otherwise, show an extra page in front of the current page to make up the displa
     <ul class="mds-pagination mds-pagination--numbers mds-text-align-center {% if params.classes %} {{params.classes}}{% endif %}">
       {% if params.prevLabel -%}
         <li class="mds-pagination__item">
-
           {%- if disabledButtonPrev -%}
             <div class="mds-pagination__link mds-pagination__link--disabled" aria-disabled="true">
-            {%- else -%}
-              <a href="{{params.pageUrlTemplate | replace('{pageNo}', pageNo - 1) }}" class="mds-pagination__link mds-pagination__link--background" aria-label="{{ params.prevLabel }} {{ params.prevVisHiddenLabel }}">
-              {%- endif -%}
-
-              {% if not params.hideIcons -%}
-                {{ MdsIcon({
-                    iconName: 'chevron-left'
-                  }) }}
-              {%- endif -%}
-              <span class="mds-display-none mds-display-md-inline mds-margin-left-b2">
-                {{- params.prevLabel -}}
-                {%- if params.prevVisHiddenLabel -%}
-                  <span class="mds-visually-hidden">{{- params.prevVisHiddenLabel -}}</span>{%- endif -%}
-              </span>
-
-              {%- if disabledButtonPrev -%}
-              </div>
-            {%- else -%}
+          {%- else -%}
+            <a href="{{params.pageUrlTemplate | replace('{pageNo}', pageNo - 1) }}"
+              class="mds-pagination__link mds-pagination__link--background"
+              {%- if params.prevVisHiddenLabel -%}aria-label="{{ params.prevVisHiddenLabel }}"{%- endif -%}>
+          {%- endif -%}
+          {% if not params.hideIcons -%}
+            {{ MdsIcon({iconName: 'chevron-left'}) }}
+          {%- endif -%}
+          <span class="mds-display-none mds-display-md-inline mds-margin-left-b2">{{- params.prevLabel -}}</span>
+          {%- if disabledButtonPrev -%}
+            </div>
+          {%- else -%}
             </a>
           {%- endif -%}
-
         </li>
       {%- endif %}
       <li class="mds-pagination__item mds-border-left">
@@ -125,35 +117,26 @@ Otherwise, show an extra page in front of the current page to make up the displa
           }}
         </li>
       {%- endif -%}
-      {% if params.nextLabel -%}
+      {%- if params.nextLabel -%}
         <li class="mds-pagination__item mds-border-left">
-
           {%- if disabledButtonNext -%}
             <div class="mds-pagination__link mds-pagination__link--disabled" aria-disabled="true">
-            {%- else -%}
-              <a href="{{params.pageUrlTemplate | replace('{pageNo}', pageNo + 1)}}" class="mds-pagination__link mds-pagination__link--background" aria-label="{{ params.nextLabel }} {{ params.nextVisHiddenLabel }}">
-              {%- endif -%}
-
-              <span class="mds-display-none mds-display-md-inline mds-margin-right-b2">
-                {{- params.nextLabel -}}
-                {%- if params.nextVisHiddenLabel -%}
-                  <span class="mds-visually-hidden">{{- params.nextVisHiddenLabel -}}</span>{%- endif -%}
-              </span>
-
-              {% if not params.hideIcons -%}
-                {{ MdsIcon({
-                iconName: 'chevron-right'
-              }) }}
-              {%- endif %}
-
-              {%- if disabledButtonNext -%}
-              </div>
-            {%- else -%}
+          {%- else -%}
+            <a href="{{params.pageUrlTemplate | replace('{pageNo}', pageNo + 1)}}"
+              class="mds-pagination__link mds-pagination__link--background"
+              {%- if params.nextVisHiddenLabel -%}aria-label="{{ params.nextVisHiddenLabel }}"{%- endif -%}>
+          {%- endif -%}
+          <span class="mds-display-none mds-display-md-inline mds-margin-right-b2">{{- params.nextLabel -}}</span>
+          {%- if not params.hideIcons -%}
+            {{ MdsIcon({iconName: 'chevron-right'}) }}
+          {%- endif -%}
+          {%- if disabledButtonNext -%}
+            </div>
+          {%- else -%}
             </a>
           {%- endif -%}
-
         </li>
-      {%- endif %}
+      {%- endif -%}
     </ul>
   </nav>
 

package/src/components/pagination-numbers/pagination-numbers.config.js

@@ -6,11 +6,11 @@ module.exports = {
     name: 'Pagination numbers',
     nextLabel: 'Next',
     prevLabel: 'Previous',
-    pageVisHiddenLabel: 'Page',
-    pageVisHiddenCurrentPageLabel: 'Current page',
+    pageVisHiddenLabel: 'Page {pageNo}',
+    pageVisHiddenCurrentPageLabel: 'Current page, page {pageNo}',
     pageUrlTemplate: '/article/{pageNo}/my-seo-things',
-    prevVisHiddenLabel: 'article',
-    nextVisHiddenLabel: 'article',
+    prevVisHiddenLabel: 'Previous article',
+    nextVisHiddenLabel: 'Next article',
     id: 'default',
   },
   variants: [

package/src/layout/grid/README.md

@@ -40,6 +40,8 @@ You can use `space-around` or `space-between` by adding the classes `mds-grid-ar
 
 For smaller (half width) gutters `mds-grid-small` can be used on the row element.
 
+I you want a column to only be as wide as it's content needs it to be, and allows other columns to grow to fill the remaining space use `.mds-grid-fit-content`.
+
 ### Reordering and Reversing
 
 You can move an element to the first or last position with the classes `mds-grid-first-` and `mds-grid-last-`

package/src/layout/grid/grid.njk

@@ -59,6 +59,6 @@
     <h2>Grow to fit column</h2>
     <div class="mds-grid-row">
         <div class="mds-grid-col"><span>Column</span></div>
-        <div class="mds-grid-col mds-grid-grow-0"><span class="mds-whitespace-nowrap">Column with grow 0</span></div>
+        <div class="mds-grid-col mds-grid-fit-content"><span class="mds-whitespace-nowrap">with content fit</span></div>
     </div>
 </div>

package/src/scss/core/_grid.scss

@@ -220,8 +220,9 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   order: 1;
 }
 
-.mds-grid-grow-0 {
+.mds-grid-fit-content {
   flex-grow: 0;
+  flex-basis: auto;
 }
 
 @media only screen and (min-width: $mds-size-breakpoint-sm) {