@madgex/design-system 9.1.0 → 9.1.2

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/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 Tue, 29 Oct 2024 16:55:25 GMT
+ * Generated on Wed, 13 Nov 2024 14:57:18 GMT
  */
 
 $constant-color-neutral-base: #707070;

package/src/tokens/_config.js

@@ -35,27 +35,39 @@ const config = {
         },
       ],
     },
-    sketch: {
-      transformGroup: 'web',
-      buildPath: `${path.resolve(__dirname, '../../dist/_tokens/sketch/')}/`,
-      prefix: 'mds',
-      files: [
-        {
-          destination: '_tokens.sketchpalette',
-          format: 'sketch/palette',
-        },
-      ],
-    },
-    // json: {
-    //   transformGroup: 'js',
-    //   buildPath: 'dist/json/',
+    // sketch: {
+    //   transformGroup: 'web',
+    //   buildPath: `${path.resolve(__dirname, '../../dist/_tokens/sketch/')}/`,
+    //   prefix: 'mds',
     //   files: [
     //     {
-    //       destination: '_variables.json',
-    //       format: 'json',
+    //       destination: '_tokens.sketchpalette',
+    //       format: 'sketch/palette',
     //     },
     //   ],
     // },
+    'json-flat': {
+      transformGroup: 'js',
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
+      buildPath: 'dist/_tokens/json/',
+      files: [
+        {
+          destination: '_tokens-flat.json',
+          format: 'json/flat',
+        },
+      ],
+    },
+    'json-nested': {
+      transformGroup: 'js',
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
+      buildPath: 'dist/_tokens/json/',
+      files: [
+        {
+          destination: '_tokens-nested.json',
+          format: 'json',
+        },
+      ],
+    },
     // 'js-es6': {
     //   transformGroup: 'js',
     //   buildPath: 'dist/js/',

package/dist/_tokens/sketch/_tokens.sketchpalette

@@ -1,5 +0,0 @@
-{
-  "compatibleVersion": "1.0",
-  "pluginVersion": "1.1",
-  "colors": []
-}