@madgex/design-system 1.51.0 → 1.53.0

package/src/icons/minus.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/ -/ 12px_32</title>
+    <g id="Icon/--/-12px_32" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M4,16 C4,14.8609127 4.84646164,13.9195271 5.94468833,13.7705398 L6.25,13.75 L25.75,13.75 C26.9926407,13.75 28,14.7573593 28,16 C28,17.1390873 27.1535384,18.0804729 26.0553117,18.2294602 L25.75,18.25 L6.25,18.25 C5.00735931,18.25 4,17.2426407 4,16 Z" id="Combined-Shape-Copy" fill="#001FFF"></path>
+    </g>
+</svg>

package/src/icons/plus-small.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/ +/ 12px_32</title>
+    <g id="Icon/-+/-12px_32" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M16,4 C17.1390873,4 18.0804729,4.84646164 18.2294602,5.94468833 L18.25,6.25 L18.25,13.75 L25.75,13.75 C26.9926407,13.75 28,14.7573593 28,16 C28,17.1390873 27.1535384,18.0804729 26.0553117,18.2294602 L25.75,18.25 L18.25,18.25 L18.25,25.75 C18.25,26.9926407 17.2426407,28 16,28 C14.8609127,28 13.9195271,27.1535384 13.7705398,26.0553117 L13.75,25.75 L13.75,18.25 L6.25,18.25 C5.00735931,18.25 4,17.2426407 4,16 C4,14.8609127 4.84646164,13.9195271 5.94468833,13.7705398 L6.25,13.75 L13.75,13.75 L13.75,6.25 C13.75,5.00735931 14.7573593,4 16,4 Z" id="Combined-Shape-Copy" fill="#001FFF"></path>
+    </g>
+</svg>

package/src/icons/plus.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/ Chevron/ +/ 8px_32</title>
+    <g id="Icon/-Chevron/-+/-8px_32" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M16,0 C17.5187831,0 18.7739638,1.12861553 18.9726135,2.59291777 L19,3 L19,13 L29,13 C30.6568542,13 32,14.3431458 32,16 C32,17.5187831 30.8713845,18.7739638 29.4070822,18.9726135 L29,19 L19,19 L19,29 C19,30.6568542 17.6568542,32 16,32 C14.4812169,32 13.2260362,30.8713845 13.0273865,29.4070822 L13,29 L13,19 L3,19 C1.34314575,19 8.22439572e-17,17.6568542 1.8369702e-16,16 C2.76695661e-16,14.4812169 1.12861553,13.2260362 2.59291777,13.0273865 L3,13 L13,13 L13,3 C13,1.34314575 14.3431458,0 16,0 Z" id="Combined-Shape-Copy" fill="#001FFF"></path>
+    </g>
+</svg>

package/src/layout/containers/01-base-containers.njk

@@ -1,27 +1,29 @@
 <div class="mds-site-container container-example" style="margin: 80px 0;">
-  <div class="mds-wrapper">
-    <div class="mds-surface mds-margin-bottom-b5">
-      <div class="mds-surface__inner">
-        <h2>Content inside the site-container and wrapper</h2>
-        <p>site-container is 100%</p>
-        <p>wrapper is 100% - 20px (gutter width) and max-width 1280px (1.5% left and right padding)</p>
-        <div style="height: 100px;"></div>
-      </div>
-    </div>
-    <div class="mds-grid-row mds-margin-bottom-b5">
-      <div class="mds-grid-col-12 mds-grid-col-sm-12 mds-grid-col-md-5 mds-grid-col-lg-8 mds-grid-col-xl-7">
-        <div class="mds-surface">
-          <div class="mds-surface__inner">Surface - test padding</div>
+  <main class="mds-main" role="main">
+    <div class="mds-wrapper">
+      <div class="mds-surface mds-margin-bottom-b5">
+        <div class="mds-surface__inner">
+          <h2>Content inside the site-container and wrapper</h2>
+          <p>site-container is 100%</p>
+          <p>wrapper is 100% - 20px (gutter width) and max-width 1280px (1.5% left and right padding)</p>
+          <div style="height: 100px;"></div>
         </div>
       </div>
-      <div class="mds-grid-col-5 mds-grid-col-sm-5 mds-grid-col-md-7 mds-grid-col-lg-4 mds-grid-col-xl-5">
-        <div class="mds-surface">
-          <div class="mds-surface__inner">Surface - test padding</div>
+      <div class="mds-grid-row mds-margin-bottom-b5">
+        <div class="mds-grid-col-12 mds-grid-col-sm-12 mds-grid-col-md-5 mds-grid-col-lg-8 mds-grid-col-xl-7">
+          <div class="mds-surface">
+            <div class="mds-surface__inner">Surface - test padding</div>
+          </div>
+        </div>
+        <div class="mds-grid-col-5 mds-grid-col-sm-5 mds-grid-col-md-7 mds-grid-col-lg-4 mds-grid-col-xl-5">
+          <div class="mds-surface">
+            <div class="mds-surface__inner">Surface - test padding</div>
+          </div>
         </div>
       </div>
+      <div class="mds-fixed-container mds-fixed-container--sticky mds-padding-b5 mds-text-align-center">This is a sticky container</div>
     </div>
-    <div class="mds-fixed-container mds-fixed-container--sticky mds-padding-b5 mds-text-align-center">This is a sticky container</div>
-  </div>
+  </main>
 </div>
 
 {# <div class="mds-fixed-container mds-padding-b5 mds-text-align-center">This a fixed container at the bottom</div> #}

package/src/layout/containers/README.md

@@ -14,6 +14,9 @@ When placed inside a `mds-wrapper` block, the container will stretch automatical
 
 _Note: We don't currently use the sticky block inside a wrapper block at tablet/desktop size so it may have to be reviewed when we do._
 
+`mds-main` - this class is added to the HTML `<main>` element which represents the dominant content of the <body> of a document. (Note: A document mustn't have more than one `<main>` element that doesn't have the hidden attribute specified.)
+This class is there to be able to customise this container like adding a background, margin or padding with the help of branding tokens.
+
 ## Branded Containers
 
 Use `mds-branded-container mds-branded-container--1` to get a container with the brand colour 1 as a background and white text (the background and the text are tokens that can be changed per project).

package/src/layout/containers/base-containers.config.json

@@ -1,3 +1,3 @@
 {
-  "notes": "## Containers\n\nClass `mds-site-container` should be added right after the body, it contains all the visual elements of the site\n\n`mds-wrapper` inside `mds-site-container` will give a max-width to the content of the pages\n\n`mds-surface` will add a block with a white background, border and and border-radius. Add `mds-surface__inner` inside it to get the padding.\n\n`mds-surface__inner` has a default padding of 16px but it doubles from the `md` breakpoint (600px). However, when using the grid, if the surface block is contained inside a grid column that is less than half the width of the grid, the padding will stay at 16px.\n\nTo add a `position: fixed` container, use `mds-fixed-container`. By default it will be fixed at the bottom. Use `mds-fixed-container--top` to fix it at the top.\n\nTo add a `position: sticky` to the container, use the modifier `mds-fixed-container--sticky`.\n\nWhen placed inside a `mds-wrapper` block, the container will stretch automatically to the full width of the container by default and will go back to be within the wrapper constraints from 600px.\n\n*Note: We don't currently use the sticky block inside a wrapper block at tablet/desktop size so it may have to be reviewed when we do.*"
+  "notes": "## Containers\n\nClass `mds-site-container` should be added right after the body, it contains all the visual elements of the site\n\n`mds-wrapper` inside `mds-site-container` will give a max-width to the content of the pages\n\n`mds-surface` will add a block with a white background, border and and border-radius. Add `mds-surface__inner` inside it to get the padding.\n\n`mds-surface__inner` has a default padding of 16px but it doubles from the `md` breakpoint (600px). However, when using the grid, if the surface block is contained inside a grid column that is less than half the width of the grid, the padding will stay at 16px.\n\nTo add a `position: fixed` container, use `mds-fixed-container`. By default it will be fixed at the bottom. Use `mds-fixed-container--top` to fix it at the top.\n\nTo add a `position: sticky` to the container, use the modifier `mds-fixed-container--sticky`.\n\nWhen placed inside a `mds-wrapper` block, the container will stretch automatically to the full width of the container by default and will go back to be within the wrapper constraints from 600px.\n\n*Note: We don't currently use the sticky block inside a wrapper block at tablet/desktop size so it may have to be reviewed when we do.*\n\n`mds-main` - this class is added to the HTML `<main>` element which represents the dominant content of the <body> of a document. (Note: A document mustn't have more than one `<main>` element that doesn't have the hidden attribute specified.)\nThis class is there to be able to customise this container like adding a background, margin or padding with the help of branding tokens."
 }

package/src/scss/components/__index.scss

@@ -12,4 +12,5 @@
 @import '../../components/inputs/form-elements';
 @import '../../components/inputs/combobox/combobox';
 @import '../../components/inputs/multi-select/multi-select';
-@import '../../components/modal/modal';
+@import '../../components/modal/modal';
+@import '../../components/skip-link/skip-link';

package/src/scss/core/_containers.scss

@@ -13,6 +13,11 @@ body {
   background: $mds-color-background-site-container;
   // box-shadow: $mds-color-container-box-shadow;
 }
+.mds-main {
+  background: $mds-color-background-main;
+  padding: $mds-size-main-padding;
+  margin: $mds-size-main-margin;
+}
 .mds-wrapper {
   width: calc(#{$mds-size-wrapper-width} - #{$mds-size-gutter-width});
   max-width: $mds-size-wrapper-max-width;

package/src/scss/utilities/_z-index.scss

@@ -5,11 +5,11 @@
     modal: 1000,
   );
 
-  @each $name, $value in $z-index-map {
-    @if $name == $level {
-      z-index: $value;
-    } @else {
-      z-index: 1;
-    }
+  $levelValue: map-get($z-index-map, $level);
+
+  @if ($levelValue != null) {
+    z-index: $levelValue;
+  } @else {
+    z-index: 1;
   }
 }

package/src/tokens/color.json

@@ -115,6 +115,9 @@
       },
       "surface": {
         "value" : "{color.neutral.white.value}"
+      },
+      "main": {
+        "value" : "rgba(0,0,0,0)"
       }
     },
     "neutral": {

package/src/tokens/size.json

@@ -43,6 +43,14 @@
         "value": "16px"
       }
     },
+    "main": {
+      "padding": {
+        "value": "0"
+      },
+      "margin": {
+        "value": "0"
+      }
+    },
     "button": {
       "border": {
         "radius": {
@@ -53,8 +61,8 @@
     "icon": {
       "default": { "value": "1em" },
       "sm": { "value": "16px" },
-      "md": { "value" : "24px" },
-      "lg": {"value" : "32px"}
+      "md": { "value": "24px" },
+      "lg": { "value": "32px" }
     }
   }
-}
+}

package/tasks/colorTransforms.js

@@ -35,7 +35,7 @@ function transformAllColors(colors) {
   return colors.reduce((builtBrand, [name, color]) => {
     if (!builtBrand[name]) {
       // eslint-disable-next-line no-param-reassign
-      builtBrand[name] = Object.assign({}, createColorsFromBase(color.base), color);
+      builtBrand[name] = { ...createColorsFromBase(color.base), ...color };
     }
     return builtBrand;
   }, {});