@madgex/design-system 1.22.0 → 1.22.2

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 30 Aug 2019 15:07:31 GMT
+ * Generated on Wed, 04 Sep 2019 15:10:31 GMT
  */
 
 :root {
@@ -89,16 +89,16 @@
  --mds-font-type-great-primer-md-line-height: 1.15;
  --mds-font-type-great-primer-lg-size: 20px;
  --mds-font-type-great-primer-lg-line-height: 1.2;
- --mds-font-type-body-copy-default-size: 14px;
- --mds-font-type-body-copy-default-line-height: 1.43;
+ --mds-font-type-body-copy-default-size: 16px;
+ --mds-font-type-body-copy-default-line-height: 1.38;
  --mds-font-type-body-copy-sm-size: 16px;
  --mds-font-type-body-copy-sm-line-height: 1.38;
  --mds-font-type-body-copy-md-size: 18px;
  --mds-font-type-body-copy-md-line-height: 1.34;
  --mds-font-type-body-copy-lg-size: 16px;
  --mds-font-type-body-copy-lg-line-height: 1.38;
- --mds-font-type-body-copy-bulk-default-size: 14px;
- --mds-font-type-body-copy-bulk-default-line-height: 1.71;
+ --mds-font-type-body-copy-bulk-default-size: 16px;
+ --mds-font-type-body-copy-bulk-default-line-height: 1.75;
  --mds-font-type-body-copy-bulk-sm-size: 16px;
  --mds-font-type-body-copy-bulk-sm-line-height: 1.75;
  --mds-font-type-body-copy-bulk-md-size: 18px;
@@ -151,7 +151,7 @@
  --mds-size-wrapper-width: 100%;
  --mds-size-wrapper-max-width: 1280px;
  --mds-size-wrapper-padding: 1.5%;
- --mds-size-surface-padding: 28px 32px;
+ --mds-size-surface-padding: 16px;
  --mds-size-button-border-radius: 4px;
  --mds-size-icon-default: 1em;
  --mds-size-icon-sm: 16px;

package/dist/_tokens/js/_tokens-module.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 30 Aug 2019 15:07:31 GMT
+ * Generated on Wed, 04 Sep 2019 15:10:32 GMT
  */
 
 module.exports = {
@@ -1798,9 +1798,9 @@ module.exports = {
       "body-copy": {
         "default": {
           "size": {
-            "value": "14px",
+            "value": "16px",
             "original": {
-              "value": "14px"
+              "value": "16px"
             },
             "name": "MdsFontTypeBodyCopyDefaultSize",
             "attributes": {
@@ -1819,9 +1819,9 @@ module.exports = {
             ]
           },
           "line-height": {
-            "value": "1.43",
+            "value": "1.38",
             "original": {
-              "value": "1.43"
+              "value": "1.38"
             },
             "name": "MdsFontTypeBodyCopyDefaultLineHeight",
             "attributes": {
@@ -1976,9 +1976,9 @@ module.exports = {
       "body-copy-bulk": {
         "default": {
           "size": {
-            "value": "14px",
+            "value": "16px",
             "original": {
-              "value": "14px"
+              "value": "16px"
             },
             "name": "MdsFontTypeBodyCopyBulkDefaultSize",
             "attributes": {
@@ -1997,9 +1997,9 @@ module.exports = {
             ]
           },
           "line-height": {
-            "value": "1.71",
+            "value": "1.75",
             "original": {
-              "value": "1.71"
+              "value": "1.75"
             },
             "name": "MdsFontTypeBodyCopyBulkDefaultLineHeight",
             "attributes": {
@@ -3110,9 +3110,9 @@ module.exports = {
     },
     "surface": {
       "padding": {
-        "value": "28rem",
+        "value": "16rem",
         "original": {
-          "value": "28px 32px"
+          "value": "16px"
         },
         "name": "MdsSizeSurfacePadding",
         "attributes": {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Fri, 30 Aug 2019 15:07:31 GMT
+  Generated on Wed, 04 Sep 2019 15:10:32 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;
@@ -89,16 +89,16 @@ $mds-font-type-great-primer-md-size: 21px !default;
 $mds-font-type-great-primer-md-line-height: 1.15 !default;
 $mds-font-type-great-primer-lg-size: 20px !default;
 $mds-font-type-great-primer-lg-line-height: 1.2 !default;
-$mds-font-type-body-copy-default-size: 14px !default;
-$mds-font-type-body-copy-default-line-height: 1.43 !default;
+$mds-font-type-body-copy-default-size: 16px !default;
+$mds-font-type-body-copy-default-line-height: 1.38 !default;
 $mds-font-type-body-copy-sm-size: 16px !default;
 $mds-font-type-body-copy-sm-line-height: 1.38 !default;
 $mds-font-type-body-copy-md-size: 18px !default;
 $mds-font-type-body-copy-md-line-height: 1.34 !default;
 $mds-font-type-body-copy-lg-size: 16px !default;
 $mds-font-type-body-copy-lg-line-height: 1.38 !default;
-$mds-font-type-body-copy-bulk-default-size: 14px !default;
-$mds-font-type-body-copy-bulk-default-line-height: 1.71 !default;
+$mds-font-type-body-copy-bulk-default-size: 16px !default;
+$mds-font-type-body-copy-bulk-default-line-height: 1.75 !default;
 $mds-font-type-body-copy-bulk-sm-size: 16px !default;
 $mds-font-type-body-copy-bulk-sm-line-height: 1.75 !default;
 $mds-font-type-body-copy-bulk-md-size: 18px !default;
@@ -151,7 +151,7 @@ $mds-size-container-max-width: 100% !default;
 $mds-size-wrapper-width: 100% !default;
 $mds-size-wrapper-max-width: 1280px !default;
 $mds-size-wrapper-padding: 1.5% !default;
-$mds-size-surface-padding: 28px 32px !default;
+$mds-size-surface-padding: 16px !default;
 $mds-size-button-border-radius: 4px !default;
 $mds-size-icon-default: 1em !default;
 $mds-size-icon-sm: 16px !default;

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Fri, 30 Aug 2019 15:07:31 GMT
+  Generated on Wed, 04 Sep 2019 15:10:32 GMT
 */
 html,
 body,
@@ -444,7 +444,11 @@ template {
   white-space: nowrap;
 }
 
-h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre {
+h1 {
+  margin-bottom: 24px;
+}
+
+h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre {
   margin-bottom: 12px;
 }
 
@@ -503,8 +507,14 @@ body {
   background: #ffffff;
 }
 
-.mds-surface__inner {
-  padding: 28px 32px;
+.mds-surface__inner, .js .mds-tabs__tab, .js .mds-tabs__panel {
+  padding: 16px;
+}
+
+@media (min-width: 37.5em) {
+  .mds-surface__inner, .js .mds-tabs__tab, .js .mds-tabs__panel {
+    padding: calc(16px * 2);
+  }
 }
 
 .mds-fixed-container {
@@ -533,6 +543,10 @@ body {
   margin-left: 16px;
 }
 
+.mds-list__item:last-child {
+  margin-bottom: 0;
+}
+
 .mds-list--bullet,
 .mds-list--number {
   margin-left: 12px;
@@ -566,6 +580,10 @@ body {
   margin-bottom: 12px;
 }
 
+.mds-list__value:last-child {
+  margin-bottom: 0;
+}
+
 .mds-list--inline {
   margin-left: 0;
 }
@@ -1467,24 +1485,20 @@ body {
   cursor: pointer;
   user-select: none;
   vertical-align: middle;
-  white-space: nowrap;
   -webkit-appearance: none;
+  width: auto;
   border: 1px solid transparent;
   border-radius: 4px;
   background-color: #f0af11;
-  padding: 12px 12px;
-  font-size: 100%;
-  width: 100%;
+  padding: 12px 20px;
   display: inline-block;
   text-align: center;
   color: #343433;
-  line-height: 1.15;
 }
 
 @media (min-width: 37.5em) {
   .mds-button {
-    width: auto;
-    padding: 8px 12px;
+    padding: 8px 20px;
   }
 }
 
@@ -1499,6 +1513,26 @@ body {
   color: #343433;
 }
 
+.mds-button--small {
+  padding: 8px 12px;
+}
+
+@media (min-width: 37.5em) {
+  .mds-button--small {
+    padding: 4px 12px;
+  }
+}
+
+.mds-button--large {
+  padding: 20px 24px;
+}
+
+@media (min-width: 37.5em) {
+  .mds-button--large {
+    padding: 16px 24px;
+  }
+}
+
 .mds-card {
   padding: 12px 16px;
   border: 1px solid #dddddd;
@@ -1550,7 +1584,6 @@ body {
   text-align: center;
   margin-right: 4px;
   margin-bottom: 0;
-  padding: 28px 32px;
   padding-top: 24px;
   padding-bottom: 20px;
 }
@@ -1566,10 +1599,6 @@ body {
   color: #222222;
 }
 
-.js .mds-tabs__panel {
-  padding: 28px 32px;
-}
-
 .mds-input {
   width: 100%;
   background-color: #f8f8f8;
@@ -1738,35 +1767,35 @@ body {
   }
 }
 
-.mds-font-body-copy, body, h4 {
-  font-size: 0.875rem;
-  line-height: 1.43;
+.mds-font-body-copy, body, h4, .mds-button {
+  font-size: 1rem;
+  line-height: 1.38;
 }
 
 @media (min-width: 25em) {
-  .mds-font-body-copy, body, h4 {
+  .mds-font-body-copy, body, h4, .mds-button {
     font-size: 1rem;
     line-height: 1.38;
   }
 }
 
 @media (min-width: 37.5em) {
-  .mds-font-body-copy, body, h4 {
+  .mds-font-body-copy, body, h4, .mds-button {
     font-size: 1.125rem;
     line-height: 1.34;
   }
 }
 
 @media (min-width: 63em) {
-  .mds-font-body-copy, body, h4 {
+  .mds-font-body-copy, body, h4, .mds-button {
     font-size: 1rem;
     line-height: 1.38;
   }
 }
 
 .mds-font-body-copy-bulk {
-  font-size: 0.875rem;
-  line-height: 1.71;
+  font-size: 1rem;
+  line-height: 1.75;
 }
 
 @media (min-width: 25em) {
@@ -4758,3 +4787,47 @@ body {
 .mds-edited-text .mds-font-body-copy-bulk p {
   margin-bottom: 16px;
 }
+
+.mds-width-full {
+  width: 100%;
+}
+
+.mds-width-auto {
+  width: auto;
+}
+
+@media (min-width: 25em) {
+  .mds-width-sm-full {
+    width: 100%;
+  }
+  .mds-width-sm-auto {
+    width: auto;
+  }
+}
+
+@media (min-width: 37.5em) {
+  .mds-width-md-full {
+    width: 100%;
+  }
+  .mds-width-md-auto {
+    width: auto;
+  }
+}
+
+@media (min-width: 63em) {
+  .mds-width-lg-full {
+    width: 100%;
+  }
+  .mds-width-lg-auto {
+    width: auto;
+  }
+}
+
+@media (min-width: 80em) {
+  .mds-width-xl-full {
+    width: 100%;
+  }
+  .mds-width-xl-auto {
+    width: auto;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/button/README.md

@@ -0,0 +1,21 @@
+## Parameters
+
+- `text`: Text on the button
+- `html`: if you want to add html markup instead of plain text, use `html` attribute instead
+- `name`: add `name` attribute
+- `element`: we're using `<button>` by default but you can change to be a link or an input
+- `href`: if `element` is a link then add the url using `href`
+- `classes`: css classes to add on the button (for example `mds-width-full`)
+- `disabled`: disable button
+- `attributes`: you can add extra attributes by passing an object to the parameter. Example: `attributes: { attribute-name: 'attribute-value' }`
+- `type`: by default it will be `submit`
+
+
+## Full width button
+
+We have 2 helpers classes that can help you achieve full width buttons at different sizes.
+`.mds-width-full` and `.mds-width-auto`.
+
+For example, if you would like your button to be full width at mobile size and have `width: auto` at any wider size, add the following classes on the button (using the `classes` parameter): `mds-width-full mds-width-md-auto`.
+
+Both helper classes are set with breakpoints. Just add the name of the class followed by the breakpoint name (`sm`, `md`, `lg`, `xl`) and the value (`full` or `auto`).

package/src/components/button/button.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   title: 'Buttons',
+  status: 'wip',
   context: {
     text: 'Button 1',
   },
@@ -18,5 +19,26 @@ module.exports = {
         text: 'Input button 3',
       },
     },
+    {
+      name: 'small-buttons',
+      context: {
+        text: 'Small button',
+        classes: 'mds-button--small',
+      },
+    },
+    {
+      name: 'large-buttons',
+      context: {
+        text: 'Large button',
+        classes: 'mds-button--large',
+      },
+    },
+    {
+      name: 'full-width-example',
+      context: {
+        text: 'Full width example',
+        classes: 'mds-width-full mds-width-md-auto',
+      },
+    },
   ],
 };

package/src/components/button/button.njk

@@ -3,5 +3,7 @@
 {{ MdsButton({
   text: text,
   element: element,
-  href: href
+  href: href,
+  classes: classes,
+  attributes: attributes
 }) }}

package/src/components/button/button.scss

@@ -7,22 +7,19 @@ $mds-color-button-text-hover: $mds-color-button-text !default;
   cursor: pointer;
   user-select: none;
   vertical-align: middle;
-  white-space: nowrap;
   -webkit-appearance: none;
+  width: auto;
   border: 1px solid transparent;
   border-radius: $mds-size-button-border-radius;
   background-color: $mds-color-button-bg;
-  padding: ($mds-size-baseline * 3) ($mds-size-baseline * 3);
-  font-size: 100%;
-  width: 100%;
+  padding: ($mds-size-baseline * 3) ($mds-size-baseline * 5);
   display: inline-block;
   text-align: center;
   color: $mds-color-button-text;
-  line-height: 1.15;
+  @extend .mds-font-body-copy;
 
   @include mq($from: md) {
-    width: auto;
-    padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
+    padding: ($mds-size-baseline * 2) ($mds-size-baseline * 5);
   }
 
   // Ensure that any global link styles are overridden
@@ -40,3 +37,19 @@ $mds-color-button-text-hover: $mds-color-button-text !default;
     color: $mds-color-button-text-hover;
   }
 }
+
+.mds-button--small {
+  padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
+
+  @include mq($from: md) {
+    padding: ($mds-size-baseline * 1) ($mds-size-baseline * 3);
+  }
+}
+
+.mds-button--large {
+  padding: ($mds-size-baseline * 5) ($mds-size-baseline * 6);
+
+  @include mq($from: md) {
+    padding: ($mds-size-baseline * 4) ($mds-size-baseline * 6);
+  }
+}

package/src/components/tabs/tabs.scss

@@ -31,7 +31,7 @@
     text-align: center;
     margin-right: $mds-size-baseline;
     margin-bottom: 0;
-    padding: $mds-size-surface-padding;
+    @extend .mds-surface__inner;
     padding-top: $mds-size-baseline * 6;
     padding-bottom: $mds-size-baseline * 5;
 
@@ -47,5 +47,5 @@
 }
 
 .js .mds-tabs__panel {
-  padding: $mds-size-surface-padding;
+  @extend .mds-surface__inner;
 }

package/src/scss/components/__index.scss

@@ -3,5 +3,5 @@
 @import '../../components/card/card';
 @import '../../components/section-title/section-title';
 @import '../../components/tabs/tabs';
-@import '../components/input/input';
-@import '../components/textarea/textarea';
+@import '../../components/input/input';
+@import '../../components/textarea/textarea';

package/src/scss/core/_containers.scss

@@ -28,6 +28,10 @@ body {
 
 .mds-surface__inner {
   padding: $mds-size-surface-padding;
+
+  @include mq($from: $mds-size-breakpoint-md) {
+    padding: calc(#{$mds-size-surface-padding} * 2);
+  }
 }
 
 .mds-fixed-container {

package/src/scss/core/_defaults.scss

@@ -1,10 +1,13 @@
 $mds-color-link: $mds-color-brand-1-base !default;
 $mds-color-link-hover: $mds-color-brand-1-dark !default;
 
-h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre {
-  margin-bottom: $mds-size-baseline * 3;
+h1 {
+  margin-bottom: $mds-size-baseline * 6;
 }
 
+h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre {
+  margin-bottom: $mds-size-baseline * 3;
+}
 
 a {
   color: $mds-color-link;

package/src/scss/core/_lists.scss

@@ -7,6 +7,10 @@
 .mds-list__item {
   margin-bottom: $mds-size-baseline;
   margin-left: $mds-size-baseline * 4;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 .mds-list--bullet,
 .mds-list--number {
@@ -38,6 +42,10 @@
 }
 .mds-list__value {
   margin-bottom: $mds-size-baseline * 3;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 .mds-list--inline {
   margin-left: 0;

package/src/scss/helpers/__index.scss

@@ -5,3 +5,4 @@
 @import 'display';
 @import 'borders';
 @import 'edited-text';
+@import 'width';

package/src/scss/helpers/_width.scss

@@ -0,0 +1,19 @@
+$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
+
+.mds-width-full {
+    width: 100%;
+}
+.mds-width-auto {
+    width: auto;
+}
+
+@each $bpname, $value in $breakpoints {
+    @include mq($from: $bpname) {
+      .mds-width-#{$bpname}-full {
+        width: 100%;
+      }
+      .mds-width-#{$bpname}-auto {
+          width: auto;
+      }
+    }
+  }

package/src/tokens/font.json

@@ -103,8 +103,8 @@
       },
       "body-copy": {
         "default": {
-          "size": { "value": "14px" },
-          "line-height": { "value": "1.43" }
+          "size": { "value": "16px" },
+          "line-height": { "value": "1.38" }
         },
         "sm": {
           "size": { "value": "16px" },
@@ -122,10 +122,10 @@
       "body-copy-bulk": {
         "default": {
           "size": {
-            "value": "14px"
+            "value": "16px"
           },
           "line-height": {
-            "value": "1.71"
+            "value": "1.75"
           }
         },
         "sm": {

package/src/tokens/size.json

@@ -40,7 +40,7 @@
     },
     "surface": {
       "padding": {
-        "value": "28px 32px"
+        "value": "16px"
       }
     },
     "button": {