@madgex/design-system 10.0.4 → 10.0.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "10.0.4",
+  "version": "10.0.6",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",
@@ -25,19 +25,20 @@
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
     "dev": "cross-env NODE_ENV=development gulp dev",
-    "debug": "node --inspect ./node_modules/.bin/gulp dev",
     "build": "gulp build",
     "build:icons": "svgo -f src/icons ./dist/assets/icons",
     "build:fractal": "fractal build",
-    "prepublishOnly": "npm run build",
     "test": "jest",
     "cypress": "cypress run",
-    "cypress:open": "cypress open"
+    "cypress:open": "cypress open",
+    "prepublishOnly": "npm run build",
+    "semantic-release": "semantic-release -e semantic-release-monorepo"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/madgex/madgex-design-system"
+    "url": "https://github.com/wiley/madgex-design-system"
   },
+  "homepage": "https://design-system.jb.dev.madgexhosting.net/",
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
     "glob": "^11.0.1",
@@ -95,6 +96,5 @@
   },
   "engines": {
     "node": ">=22"
-  },
-  "gitHead": "01e59e8a7fb26172c1bbfb0d5cf048b5dadcea31"
+  }
 }

package/src/components/media-block/media-block.config.js

@@ -10,6 +10,7 @@ module.exports = {
     <br>
     Pink, dashed container to help reveal component.`,
     // imageSrc, imageAlt, imagePosition, imageSize are undefined by default
+    classes: 'component-demo component-demo--padded',
     content: `
             <h3 class="mds-font-s0"><a href="#">Title via Caller</a></h3>
             <p class="mds-font-s-2">Description via caller.</p>

package/src/components/media-block/media-block.njk

@@ -11,7 +11,7 @@
 
     <p class="mds-margin-top-b12">With image - 3 column using mds grid. Note how lack of column width causes MediaBlock to stack.</p>
     {# wrap in dashed border to help seperate examples #}
-    <div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
+    <div class="mds-margin-bottom-b5">
         
         <div class="mds-grid-row">
         {% for i in range(0, 3) %}
@@ -36,7 +36,7 @@
     </div>
 
     <p class="mds-margin-top-b12">With image - 2 column using mds grid. More width per column means horizontal layout.</p>
-    <div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
+    <div class="mds-margin-bottom-b5">
 
         <div class="mds-grid-row">
         {% for i in range(0, 2) %}
@@ -60,7 +60,7 @@
     </div>
 
     <p class="mds-margin-top-b12">With image - 2 column using mds grid (<code>noContainerQueries: true</code>)</p>
-    <div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
+    <div class="mds-margin-bottom-b5">
 
         <div class="mds-grid-row">
         {% for i in range(0, 2) %}
@@ -85,7 +85,7 @@
     </div>
 
     <p class="mds-margin-top-b12">Without image</p>
-    <div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
+    <div class="mds-margin-bottom-b5">
 
         <div class="mds-grid-row">
         {% for i in range(0, 3) %}
@@ -103,7 +103,7 @@
         </div>
 
     </div>
-    <div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
+    <div class="mds-margin-bottom-b5">
 
         <div class="mds-grid-row">
         {% for i in range(0, 2) %}
@@ -125,7 +125,7 @@
 {% else %}
 
     {# Regular examples #}
-    <div class="mds-margin-bottom-b5" style="border: 1px dashed #ccc; padding: 10px; background: rgba(255,0,0,0.05);">
+    <div class="mds-margin-bottom-b5">
 
         {% call MdsMediaBlock({
         imageSrc: imageSrc,

package/src/components/pagination/_template.njk

@@ -9,10 +9,10 @@
 {%- set nextAriaLabel = params.i18n.nextAriaLabel | default('Next page') -%}
 
 <nav aria-label="{{ navAriaLabel }}" data-test="pagination{% if params.id %}-{{params.id}}{% endif %}">
-  <ul class="mds-pagination mds-text-align-right{% if params.classes %} {{params.classes}}{% endif %}">
+  <ul class="mds-pagination mds-pagination--jobs mds-text-align-right{% if params.classes %} {{params.classes}}{% endif %}">
     {% if params.backToUrl and backToLabel -%}
-      <li class="mds-float-left">
-        <a href="{{ params.backToUrl }}" class="mds-pagination__link mds-pagination__link--back" {% if backToAriaLabel %} aria-label="{{- backToAriaLabel -}}" {% endif %}>
+      <li class="mds-pagination__item mds-pagination__back">
+        <a href="{{ params.backToUrl }}" class="mds-pagination__link mds-pagination__link--background" {% if backToAriaLabel %} aria-label="{{- backToAriaLabel -}}" {% endif %}>
           {% if not params.hideIcons -%}
             {{ MdsIcon({
               iconName: 'chevron-left',
@@ -24,7 +24,7 @@
       </li>
     {%- endif %}
     {% if params.prevUrl and prevLabel -%}
-      <li class="mds-float-left">
+      <li class="mds-pagination__item">
         <a href="{{ params.prevUrl }}"
           class="mds-pagination__link mds-pagination__link--background"
           aria-label="{{ prevAriaLabel }}{% if params.prevExtraLabel %} - {{ params.prevExtraLabel }}{% endif %}">
@@ -42,10 +42,16 @@
       </li>
     {%- endif %}
     {%- if params.nextUrl and nextLabel -%}
-      <li>
+      <li class="mds-pagination__item mds-pagination__next">
         <a href="{{ params.nextUrl }}"
-          class="mds-pagination__link mds-pagination__link--background"
+          class="mds-pagination__link mds-pagination__link--background mds-arrow-side-switch"
           aria-label="{{ nextAriaLabel }}{% if params.nextExtraLabel %} - {{ params.nextExtraLabel }}{% endif %}">
+          {% if not params.hideIcons -%}
+            {{ MdsIcon({
+              iconName: 'chevron-right',
+              classes: 'mds-icon--before'
+            }) }}
+          {%- endif %}
           {%- if params.nextExtraLabel -%}
             <strong class="mds-pagination__extra-label mds-display-none mds-display-md-inline mds-margin-right-b3">{{ params.nextExtraLabel | truncate(40, false) }}</strong>
           {%- endif -%}

package/src/components/pagination/pagination.scss

@@ -1,23 +1,90 @@
 .mds-pagination {
+  display: flex;
   text-align: right;
   width: 100%;
   @extend .mds-surface;
   @include mds-clearfix;
 }
 
+.mds-pagination--jobs {
+  flex-wrap: wrap;
+
+  .mds-arrow-side-switch {
+    .mds-icon--before {
+      display: none;
+    }
+  }
+
+  .mds-pagination__next {
+    margin-left: auto;
+  }
+
+
+
+  .mds-pagination__back {
+    text-align: left;
+
+    .mds-pagination__link {
+      border-right: $regular-border;
+    }
+
+
+  }
+
+
+
+  @media (max-width: 360px) {
+    .mds-pagination__back {
+      width: 100%;
+
+      .mds-pagination__link {
+        width: 100%;
+        border-right: none;
+        border-bottom: $regular-border;
+      }
+    }
+  }
+
+  @media (max-width: 320px) {
+    .mds-pagination__item {
+      flex-grow: 1;
+      width: 100%;
+    }
+
+    .mds-pagination__link {
+      text-align: left;
+      width: 100%;
+    }
+
+    .mds-arrow-side-switch {
+      .mds-icon--before {
+        display: inline-block;
+      }
+
+      .mds-icon--after {
+        display: none;
+      }
+    }
+
+    .mds-pagination__next {
+      margin-left: 0;
+    }
+  }
+}
+
 .mds-pagination__link {
   display: inline-block;
   padding: $constant-size-baseline * 3 $constant-size-baseline * 2;
   height: 100%;
-  &--back {
-    border-right: $regular-border;
-  }
+
   text-decoration: none;
 
   &--background {
+
     &:hover,
     &:focus {
       background-color: $constant-color-neutral-lightest;
+
       & > span,
       & > strong {
         text-decoration-thickness: $link-hover-decoration-thickness;
@@ -31,6 +98,7 @@
     color: $constant-color-neutral-lighter;
   }
 }
+
 .mds-pagination--numbers .mds-pagination__extra-label {
   display: none;
 
@@ -40,8 +108,8 @@
 }
 
 .mds-pagination--numbers {
-  display: flex;
   justify-content: space-between;
+
   &:after {
     content: none;
   }
@@ -49,15 +117,18 @@
   .mds-pagination__link {
     display: block;
   }
+
   .mds-pagination__item {
     flex-grow: 1;
   }
+
   .mds-pagination__link--active {
     color: var(--mds-color-text-base);
     background-color: var(--mds-color-brand-1-lightest, #{$constant-color-neutral-lightest});
+
     &:hover,
     &:focus {
       color: $link-hover-color;
     }
   }
-}
+}

package/src/components/pagination-numbers/_pagination-numbers-number-macro.njk

@@ -5,14 +5,14 @@
   {%- set currentPageAriaLabel = params.i18n.currentPageAriaLabel | default('Current page, page {pageNo}') -%}
 
   <a href="{{params.pageUrlTemplate | replace('{pageNo}', params.number)}}"
-    {%- if isCurrentPage -%}
-      aria-current="true"
-      aria-label="{{ currentPageAriaLabel | replace('{pageNo}', params.number) }}"
-      class="mds-pagination__link mds-pagination__link--background mds-pagination__link--active"
-    {%- else -%}
-      aria-label="{{ pageNumberAriaLabel | replace('{pageNo}', params.number) }}"
-      class="mds-pagination__link mds-pagination__link--background"
-    {%- endif -%}>
+  {%- if isCurrentPage %}{#
+    #} aria-current="true"{#
+    #} aria-label="{{ currentPageAriaLabel | replace('{pageNo}', params.number) }}"{#
+    #} class="mds-pagination__link mds-pagination__link--background mds-pagination__link--active"
+    {%- else %}{#
+    #} aria-label="{{ pageNumberAriaLabel | replace('{pageNo}', params.number) }}"{#
+    #} class="mds-pagination__link mds-pagination__link--background"
+ {%- endif -%}>
     {%- if params.showLastEllipses -%}
       <span class="mds-display-none mds-display-md-inline">&hellip;</span>
     {%- endif -%}

package/src/helpers/container-queries/container-queries.njk

@@ -1 +1 @@
-<p>See the <a href="/components/detail/media-block" target="_top">MediaBlock</a> preview to see it in action.</p>
+<p>See the <a href="/components/detail/media-block.html" target="_top">MediaBlock</a> preview to see it in action.</p>