@madgex/design-system 9.0.1 → 9.1.1

package/src/components/subnavigation/subnavigation.scss

@@ -0,0 +1,122 @@
+.mds-subnavigation {
+  display: flex;
+  position: relative;
+  border-bottom: solid 1px $constant-color-neutral-lighter;
+  background-color: var(--mds-color-background-body);
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.mds-subnavigation__link-list {
+  display: flex;
+  flex-grow: 1;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 0;
+}
+
+.mds-subnavigation__drawer-label,
+.mds-subnavigation__link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60px;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: solid 6px rgba(0,0,0,0);
+
+  &:hover,
+  &:focus {
+    border-color: $constant-color-neutral-light;
+  }
+
+  &[aria-expanded='true'] {
+    border-color: $constant-color-neutral-light;
+  }
+
+  &[aria-current="page"] {
+    color: var(--mds-color-text-headers-base);
+    border-color: $link-hover-color;
+  }
+}
+
+.mds-subnavigation__drawer-icon,
+.mds-subnavigation__drawer-icon--open,
+.mds-subnavigation__drawer-label[aria-expanded='false'] + .mds-subnavigation__drawer-content,
+.mds-subnavigation__drawer {
+  display: none;
+}
+
+.mds-subnavigation__drawer-content {
+  position: absolute;
+  z-index: 1;
+
+  .mds-subnavigation__link {
+    border: solid 1px $constant-color-neutral-lighter;
+    background-color: var(--mds-color-background-body);
+    justify-content: flex-start;
+  }
+}
+
+.mds-subnavigation__drawer-content li:not(:first-child) .mds-subnavigation__link  {
+  border-top: none;
+}
+
+.mds-subnavigation__drawer-label[aria-expanded='false'] .mds-subnavigation__drawer-icon,
+.mds-subnavigation__drawer-label[aria-expanded='true'] .mds-subnavigation__drawer-icon--open {
+  display: inline;
+  position: static;
+  margin: 0 0 0 0.4em;
+}
+
+.mds-subnavigation__drawer-label-text--mobile,
+.mds-subnavigation__mobile-title {
+  display: none;
+}
+
+.mds-subnavigation__drawer-label-text {
+  display: inline;
+}
+
+@media only screen and (max-width: $constant-size-breakpoint-md) {
+  .mds-subnavigation__drawer-label-text {
+    display: none;
+  }
+
+  .mds-subnavigation__drawer-label-text--mobile,
+  .mds-subnavigation__mobile-title {
+    display: inline;
+  }
+
+  .mds-subnavigation__drawer {
+    margin-left: auto;
+  }
+
+  .mds-subnavigation__drawer-label {
+    border-bottom: none;
+    padding-left: 0;
+
+    &[aria-expanded='true'] {
+      color: var(--button-text-color);
+    }
+  }
+
+  .mds-subnavigation__drawer-content {
+    left: -1px;
+    right: -1px;
+    z-index: 1;
+  }
+}
+
+html:not(.js) {
+  .mds-subnavigation__mobile-title {
+    display: none;
+  }
+  
+  .mds-subnavigation__link {
+    min-height: auto;
+  }
+}

package/src/js/index.js

@@ -11,6 +11,7 @@ import './webpack-public-path';
 import './common';
 import tabs from '../components/tabs/tabs';
 import accordion from '../components/accordion/accordion';
+import subnavigation from '../components/subnavigation/subnavigation';
 import checkboxList from '../components/inputs/checkbox-list/checkbox-list';
 import popovers from '../components/popover/popover';
 import modals from '../components/modal/modal';
@@ -22,6 +23,7 @@ import prose from '../helpers/prose/prose';
 document.addEventListener('DOMContentLoaded', () => {
   tabs.init();
   accordion.init();
+  subnavigation.init();
   checkboxList.init();
   modals.init();
   fileUpload.init();

package/src/layout/forms/forms.njk

@@ -83,7 +83,7 @@
         </div>
       </fieldset>
       <div class="mds-clearfix">
-        {% MdsButton({
+        {% call MdsButton({
           classes: 'mds-width-full mds-width-md-auto mds-float-md-right'
         }) -%}
           Submit
@@ -103,7 +103,7 @@
           }) }}
         </div>
         <div class="mds-grid-col-12 mds-grid-col-md-4 mds-grid-col-lg-2">
-          {% MdsButton({
+          {% call MdsButton({
             classes: 'mds-width-full mds-width-md-auto'
           }) -%}
           Submit

package/src/scss/components/__index.scss

@@ -5,6 +5,7 @@
 @import '../../components/tabs/tabs';
 @import '../../components/accordion/accordion';
 @import '../../components/pagination/pagination';
+@import '../../components/subnavigation/subnavigation';
 @import '../../components/switch-state/switch-state';
 @import '../../components/popover/popover';
 @import '../../components/notification/notification';

package/src/scss/constants/_sd-tokens.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 17:44:55 GMT
+ * Generated on Wed, 30 Oct 2024 16:10:33 GMT
  */
 
 $constant-color-neutral-base: #707070;

package/tasks/css.js

@@ -4,6 +4,7 @@ const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const combineMediaQuery = require('postcss-combine-media-query');
 
 async function cssWebpack(srcFilePath, distFilePath, hashFilePath = false, filename = false) {
   let outputFilename;
@@ -45,7 +46,7 @@ async function cssWebpack(srcFilePath, distFilePath, hashFilePath = false, filen
                   loader: 'postcss-loader',
                   options: {
                     postcssOptions: {
-                      plugins: [autoprefixer(), cssnano()],
+                      plugins: [combineMediaQuery(), autoprefixer(), cssnano()],
                     },
                   },
                 },