@madgex/design-system 13.6.3 → 13.7.0

package/src/js/index.js

@@ -15,6 +15,7 @@ import { MdsCardLink } from '../components/card/card-link';
 import { MdsConditionalSection } from '../components/conditional-section/conditional-section';
 import { MdsImageCropper } from '../components/image-cropper/image-cropper';
 import { MdsCategoryPicker } from '../components/inputs/category-picker/category-picker';
+import { MdsScrollSpy } from '../components/scroll-spy/scroll-spy';
 
 if (!window.customElements.get('mds-dropdown-nav')) {
   window.customElements.define('mds-dropdown-nav', MdsDropdownNav);
@@ -37,6 +38,9 @@ if (!window.customElements.get('mds-file-upload')) {
 if (!window.customElements.get('mds-category-picker')) {
   window.customElements.define('mds-category-picker', MdsCategoryPicker);
 }
+if (!window.customElements.get('mds-scroll-spy')) {
+  window.customElements.define('mds-scroll-spy', MdsScrollSpy);
+}
 
 const initAll = () => {
   tabs.init();

package/src/scss/core/_lists.scss

@@ -126,5 +126,26 @@
         color: $constant-color-neutral-light;
       }
     }
+
+    &.mds-step-list__item--has-subnav:before {
+      margin-bottom: 0;
+    }
   }
 }
+
+.mds-step-list-subnav {
+  list-style-type: none;
+  border-left: 1px solid $constant-color-neutral-light;
+  margin-left: 1.25em;
+}
+.mds-step-list-subnav__link {
+  display: block;
+  padding: $constant-size-baseline * 5;
+  font-weight: normal;
+  border-left: 4px solid transparent;
+
+  &[aria-current] {
+    color: var(--mds-color-text-base);
+    border-left-color: $link-color;
+  }
+}

package/src/scss/helpers/__index.scss

@@ -12,3 +12,4 @@
 @import 'text-formatting';
 @import 'table';
 @import 'container-queries';
+@import 'position';

package/src/scss/helpers/_position.scss

@@ -0,0 +1,4 @@
+.mds-position-sticky {
+  position: sticky;
+  top: $constant-size-baseline * 5;
+}

package/src/typography/lists.njk

@@ -10,14 +10,12 @@
     <a href="#three">three</a>
   </li>
 </ul>
-
 <h2>Ordered list</h2>
 <ol class="mds-list mds-list--number">
   <li class="mds-list__item">one</li>
   <li class="mds-list__item">two</li>
   <li class="mds-list__item">three</li>
 </ol>
-
 <h2>Definition List with border</h2>
 <dl class="mds-list mds-list--definition mds-list--border">
   <dt class="mds-list__key">Recruiter</dt>
@@ -27,21 +25,18 @@
   <dt class="mds-list__key">Expires</dt>
   <dd class="mds-list__value">12pm, 25th November 1983</dd>
 </dl>
-
 <h2>Inline list</h2>
 <ul class="mds-list mds-list--inline">
   <li class="mds-list__item">One</li>
   <li class="mds-list__item">Two</li>
   <li class="mds-list__item">Three</li>
 </ul>
-
 <h2>Bordered inline list (separated)</h2>
 <ul class="mds-list mds-list--inline mds-list--pipe">
   <li class="mds-list__item">Four</li>
   <li class="mds-list__item">Five</li>
   <li class="mds-list__item">Six</li>
 </ul>
-
 <h2>Multilevel list</h2>
 <ol class="mds-list mds-list--number mds-list--multilevel">
   <li class="mds-list__item">
@@ -54,7 +49,13 @@
     <ul class="mds-list mds-list--bullet">
       <li class="mds-list__item">first</li>
       <li class="mds-list__item">second</li>
-      <li class="mds-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget metus nisi. Morbi sollicitudin, erat sed elementum suscipit, dolor nibh sagittis dui, at ultrices massa erat non ipsum. Nam euismod dapibus augue, sit amet efficitur urna malesuada vitae. Sed tincidunt felis a turpis vulputate, vitae sodales nibh imperdiet. Donec ullamcorper risus quis convallis mollis. Nullam nec magna lectus. Etiam in lobortis purus. Duis vestibulum, nibh sit amet commodo porttitor, nunc metus eleifend magna, at venenatis tortor justo at eros. Vivamus eu tincidunt mi, vel fermentum tortor. Aenean tempus, magna a scelerisque consequat, libero tortor porttitor neque, nec aliquam lorem purus sodales diam. Pellentesque a orci vitae orci fringilla sollicitudin quis vitae leo.
+      <li class="mds-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget metus nisi. Morbi
+        sollicitudin, erat sed elementum suscipit, dolor nibh sagittis dui, at ultrices massa erat non ipsum. Nam euismod
+        dapibus augue, sit amet efficitur urna malesuada vitae. Sed tincidunt felis a turpis vulputate, vitae sodales nibh
+        imperdiet. Donec ullamcorper risus quis convallis mollis. Nullam nec magna lectus. Etiam in lobortis purus. Duis
+        vestibulum, nibh sit amet commodo porttitor, nunc metus eleifend magna, at venenatis tortor justo at eros. Vivamus eu
+        tincidunt mi, vel fermentum tortor. Aenean tempus, magna a scelerisque consequat, libero tortor porttitor neque, nec
+        aliquam lorem purus sodales diam. Pellentesque a orci vitae orci fringilla sollicitudin quis vitae leo.
         <ul class="mds-list mds-list--bullet">
           <li class="mds-list__item">once</li>
           <li class="mds-list__item">twice</li>
@@ -69,7 +70,6 @@
     <a href="#two">five</a>
   </li>
 </ol>
-
 <h2>List with no indent</h2>
 <ul class="mds-list mds-list--bullet mds-list--noindent">
   <li class="mds-list__item">
@@ -82,17 +82,30 @@
     <a href="#three">three</a>
   </li>
 </ul>
-
 <h2>Step List</h2>
 <ol class="mds-step-list">
   <li class="mds-step-list__item">Step 1</li>
   <li class="mds-step-list__item">Step 2</li>
   <li class="mds-step-list__item">Step 3</li>
 </ol>
-
 <h2>Step List with page progress</h2>
 <ol class="mds-step-list">
-  <li class="mds-step-list__item"><a href="https://www.google.com">Past page with link</a></li>
-  <li class="mds-step-list__item mds-step-list__item--current" aria-current="page">Current page</li>
+  <li class="mds-step-list__item">
+    <a href="https://www.google.com">Past page with link</a>
+  </li>
+  <li class="mds-step-list__item mds-step-list__item--current mds-step-list__item--has-subnav" aria-current="page">Current
+    page
+    <ul class="mds-step-list-subnav">
+      <li class="mds-step-list-subnav__item">
+        <a class="mds-step-list-subnav__link" href="#section-1">Section 1</a>
+      </li>
+      <li class="mds-step-list-subnav__item">
+        <a class="mds-step-list-subnav__link" href="#section-2" aria-current="location">Section 2</a>
+      </li>
+      <li class="mds-step-list-subnav__item">
+        <a class="mds-step-list-subnav__link" href="#section-3">Section 3</a>
+      </li>
+    </ul>
+  </li>
   <li class="mds-step-list__item mds-step-list__item--future">Ghost of pages future</li>
 </ol>