@madgex/design-system 1.21.3 → 1.21.5

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Aug 2019 15:58:29 GMT
+ * Generated on Thu, 15 Aug 2019 17:23:54 GMT
  */
 
 :root {
@@ -96,6 +96,14 @@
  --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-sm-size: 16px;
+ --mds-font-type-body-copy-bulk-sm-line-height: 1.75;
+ --mds-font-type-body-copy-bulk-md-size: 18px;
+ --mds-font-type-body-copy-bulk-md-line-height: 1.67;
+ --mds-font-type-body-copy-bulk-lg-size: 16px;
+ --mds-font-type-body-copy-bulk-lg-line-height: 1.75;
  --mds-font-type-pica-default-size: 15px;
  --mds-font-type-pica-default-line-height: 1.34;
  --mds-font-type-pica-sm-size: 16px;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Aug 2019 15:58:29 GMT
+ * Generated on Thu, 15 Aug 2019 17:23:54 GMT
  */
 
 module.exports = {
@@ -1956,6 +1956,184 @@ module.exports = {
           }
         }
       },
+      "body-copy-bulk": {
+        "default": {
+          "size": {
+            "value": "14px",
+            "original": {
+              "value": "14px"
+            },
+            "name": "MdsFontTypeBodyCopyBulkDefaultSize",
+            "attributes": {
+              "category": "font",
+              "type": "type",
+              "item": "body-copy-bulk",
+              "subitem": "default",
+              "state": "size"
+            },
+            "path": [
+              "font",
+              "type",
+              "body-copy-bulk",
+              "default",
+              "size"
+            ]
+          },
+          "line-height": {
+            "value": "1.71",
+            "original": {
+              "value": "1.71"
+            },
+            "name": "MdsFontTypeBodyCopyBulkDefaultLineHeight",
+            "attributes": {
+              "category": "font",
+              "type": "type",
+              "item": "body-copy-bulk",
+              "subitem": "default",
+              "state": "line-height"
+            },
+            "path": [
+              "font",
+              "type",
+              "body-copy-bulk",
+              "default",
+              "line-height"
+            ]
+          }
+        },
+        "sm": {
+          "size": {
+            "value": "16px",
+            "original": {
+              "value": "16px"
+            },
+            "name": "MdsFontTypeBodyCopyBulkSmSize",
+            "attributes": {
+              "category": "font",
+              "type": "type",
+              "item": "body-copy-bulk",
+              "subitem": "sm",
+              "state": "size"
+            },
+            "path": [
+              "font",
+              "type",
+              "body-copy-bulk",
+              "sm",
+              "size"
+            ]
+          },
+          "line-height": {
+            "value": "1.75",
+            "original": {
+              "value": "1.75"
+            },
+            "name": "MdsFontTypeBodyCopyBulkSmLineHeight",
+            "attributes": {
+              "category": "font",
+              "type": "type",
+              "item": "body-copy-bulk",
+              "subitem": "sm",
+              "state": "line-height"
+            },
+            "path": [
+              "font",
+              "type",
+              "body-copy-bulk",
+              "sm",
+              "line-height"
+            ]
+          }
+        },
+        "md": {
+          "size": {
+            "value": "18px",
+            "original": {
+              "value": "18px"
+            },
+            "name": "MdsFontTypeBodyCopyBulkMdSize",
+            "attributes": {
+              "category": "font",
+              "type": "type",
+              "item": "body-copy-bulk",
+              "subitem": "md",
+              "state": "size"
+            },
+            "path": [
+              "font",
+              "type",
+              "body-copy-bulk",
+              "md",
+              "size"
+            ]
+          },
+          "line-height": {
+            "value": "1.67",
+            "original": {
+              "value": "1.67"
+            },
+            "name": "MdsFontTypeBodyCopyBulkMdLineHeight",
+            "attributes": {
+              "category": "font",
+              "type": "type",
+              "item": "body-copy-bulk",
+              "subitem": "md",
+              "state": "line-height"
+            },
+            "path": [
+              "font",
+              "type",
+              "body-copy-bulk",
+              "md",
+              "line-height"
+            ]
+          }
+        },
+        "lg": {
+          "size": {
+            "value": "16px",
+            "original": {
+              "value": "16px"
+            },
+            "name": "MdsFontTypeBodyCopyBulkLgSize",
+            "attributes": {
+              "category": "font",
+              "type": "type",
+              "item": "body-copy-bulk",
+              "subitem": "lg",
+              "state": "size"
+            },
+            "path": [
+              "font",
+              "type",
+              "body-copy-bulk",
+              "lg",
+              "size"
+            ]
+          },
+          "line-height": {
+            "value": "1.75",
+            "original": {
+              "value": "1.75"
+            },
+            "name": "MdsFontTypeBodyCopyBulkLgLineHeight",
+            "attributes": {
+              "category": "font",
+              "type": "type",
+              "item": "body-copy-bulk",
+              "subitem": "lg",
+              "state": "line-height"
+            },
+            "path": [
+              "font",
+              "type",
+              "body-copy-bulk",
+              "lg",
+              "line-height"
+            ]
+          }
+        }
+      },
       "pica": {
         "default": {
           "size": {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Thu, 08 Aug 2019 15:58:29 GMT
+  Generated on Thu, 15 Aug 2019 17:23:54 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;
@@ -96,6 +96,14 @@ $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-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;
+$mds-font-type-body-copy-bulk-md-line-height: 1.67 !default;
+$mds-font-type-body-copy-bulk-lg-size: 16px !default;
+$mds-font-type-body-copy-bulk-lg-line-height: 1.75 !default;
 $mds-font-type-pica-default-size: 15px !default;
 $mds-font-type-pica-default-line-height: 1.34 !default;
 $mds-font-type-pica-sm-size: 16px !default;
@@ -332,6 +340,24 @@ $tokens: (
           'line-height': $mds-font-type-body-copy-lg-line-height
         )
       ),
+      'body-copy-bulk': (
+        'default': (
+          'size': $mds-font-type-body-copy-bulk-default-size,
+          'line-height': $mds-font-type-body-copy-bulk-default-line-height
+        ),
+        'sm': (
+          'size': $mds-font-type-body-copy-bulk-sm-size,
+          'line-height': $mds-font-type-body-copy-bulk-sm-line-height
+        ),
+        'md': (
+          'size': $mds-font-type-body-copy-bulk-md-size,
+          'line-height': $mds-font-type-body-copy-bulk-md-line-height
+        ),
+        'lg': (
+          'size': $mds-font-type-body-copy-bulk-lg-size,
+          'line-height': $mds-font-type-body-copy-bulk-lg-line-height
+        )
+      ),
       'pica': (
         'default': (
           'size': $mds-font-type-pica-default-size,

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Thu, 08 Aug 2019 15:58:29 GMT
+  Generated on Thu, 15 Aug 2019 17:23:54 GMT
 */
 html,
 body,
@@ -464,6 +464,7 @@ img {
 
 body {
   font-family: "Helvetica", Arial, sans-serif;
+  color: #222222;
 }
 
 html,
@@ -514,11 +515,12 @@ body {
   margin: 0 0 20px 0;
   padding: 0;
   list-style-type: none;
-  list-style-position: inside;
+  list-style-position: outside;
 }
 
-.mds-list > li {
+.mds-list__item {
   margin-bottom: 8px;
+  margin-left: 16px;
 }
 
 .mds-list--bullet {
@@ -554,6 +556,10 @@ body {
   margin-right: 8px;
 }
 
+.mds-list--multilevel .mds-list {
+  margin: 8px 0 0 0;
+}
+
 /* Source: https://github.com/kristoferjoseph/flexboxgrid */
 .mds-grid-row {
   box-sizing: border-box;
@@ -1683,6 +1689,32 @@ body {
   }
 }
 
+.mds-font-body-copy-bulk {
+  font-size: 0.875rem;
+  line-height: 1.71;
+}
+
+@media (min-width: 25em) {
+  .mds-font-body-copy-bulk {
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+}
+
+@media (min-width: 37.5em) {
+  .mds-font-body-copy-bulk {
+    font-size: 1.125rem;
+    line-height: 1.67;
+  }
+}
+
+@media (min-width: 63em) {
+  .mds-font-body-copy-bulk {
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+}
+
 .mds-font-pica {
   font-size: 0.9375rem;
   line-height: 1.34;
@@ -4618,3 +4650,30 @@ body {
 .mds-border-radius-none {
   border-radius: 0;
 }
+
+.mds-edited-text ul,
+.mds-edited-text ol {
+  margin: 0 0 20px 0;
+  padding: 0;
+  list-style-position: outside;
+}
+
+.mds-edited-text ul ul,
+.mds-edited-text ul ol,
+.mds-edited-text ol ul,
+.mds-edited-text ol ol {
+  margin: 8px 0 0 0;
+}
+
+.mds-edited-text ul {
+  list-style-type: disc;
+}
+
+.mds-edited-text ol {
+  list-style-type: decimal;
+}
+
+.mds-edited-text li {
+  margin-bottom: 8px;
+  margin-left: 16px;
+}

package/package.json

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

package/src/components/tabs/_template.njk

@@ -38,7 +38,7 @@
             {%- endif -%}
             {% endset -%}
 
-            <section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}" id="{{ tabPanelId }}">{{ item.content | safe }}</section>
+            <section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}{% if item.contentClasses %} {{ item.contentClasses }}{% endif %}" id="{{ tabPanelId }}">{{ item.content | safe }}</section>
         {%- endfor -%}
     </div>
 {% endif %}

package/src/components/tabs/tabs.config.js

@@ -23,6 +23,7 @@ module.exports = {
         id: 'next-week',
         content:
           '<strong>Next week:</strong><ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
+        contentClasses: 'mds-edited-text',
       },
       {
         label: 'Next month',
@@ -54,6 +55,7 @@ module.exports = {
             label: 'Seagulls',
             content:
               '<strong>Seagulls:</strong><ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
+            contentClasses: 'mds-edited-text',
           },
         ],
       },

package/src/helpers/edited-text/README.md

@@ -0,0 +1,5 @@
+## Helpers
+
+Use the class `mds-edited-text` to normalise the text coming from a WYSIWYG editor,
+ul, ol tags will have the style that has been removed in css-reset
+this should only be used when content from a WYSIWYG editor is displayed

package/src/helpers/edited-text/edited-text.njk

@@ -0,0 +1,28 @@
+<div class="mds-edited-text">
+  <ol>
+    <li>
+      one
+    </li>
+    <li>
+      <a href="#two">two</a>
+    </li>
+    <li>three
+      <ul>
+        <li>first</li>
+        <li>second</li>
+        <li>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>
+            <li>once</li>
+            <li>twice</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <a href="#two">four</a>
+    </li>
+    <li>
+      <a href="#two">five</a>
+    </li>
+  </ol>
+</div>

package/src/scss/components/__index.scss

@@ -0,0 +1,5 @@
+@import '../../components/icons/icons';
+@import '../../components/button/button';
+@import '../../components/card/card';
+@import '../../components/section-title/section-title';
+@import '../../components/tabs/tabs';

package/src/scss/core/_lists.scss

@@ -2,15 +2,17 @@
   margin: 0 0 ($mds-size-baseline * 5) 0;
   padding: 0;
   list-style-type: none;
-  list-style-position: inside;
-
-  & > li {
-    margin-bottom: $mds-size-baseline * 2;
-  }
+  list-style-position: outside;
+}
+.mds-list__item {
+  margin-bottom: $mds-size-baseline * 2;
+  margin-left: $mds-size-baseline * 4;
 }
+
 .mds-list--bullet {
   list-style-type: disc;
 }
+
 .mds-list--number {
   list-style-type: decimal;
 }
@@ -37,4 +39,8 @@
   display: inline-block;
   margin-bottom: 0;
   margin-right: $mds-size-baseline * 2;
-}
+}
+
+.mds-list--multilevel .mds-list {
+  margin: ($mds-size-baseline * 2) 0 0 0;
+}

package/src/scss/core/_typography.scss

@@ -1,6 +1,7 @@
 body {
   @extend .mds-font-body-copy;
   font-family: $mds-font-family-base;
+  color: $mds-color-text-base;
 }
 
 h1 {

package/src/scss/helpers/__index.scss

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

package/src/scss/helpers/_edited-text.scss

@@ -0,0 +1,22 @@
+.mds-edited-text {
+  ul,
+  ol {
+    margin: 0 0 ($mds-size-baseline * 5) 0;
+    padding: 0;
+    list-style-position: outside;
+    ul,
+    ol {
+      margin: ($mds-size-baseline * 2) 0 0 0;
+    }
+  }
+  ul {
+    list-style-type: disc;
+  }
+  ol {
+    list-style-type: decimal;
+  }
+  li {
+    margin-bottom: $mds-size-baseline * 2;
+    margin-left: $mds-size-baseline * 4;
+  }
+}

package/src/scss/index.scss

@@ -4,12 +4,7 @@
 @import 'functions/_index';
 @import 'utilities/_index';
 @import 'core/_index';
-
-@import '../components/icons/icons';
-@import '../components/button/button';
-@import '../components/card/card';
-@import '../components/section-title/section-title';
-@import '../components/tabs/tabs';
+@import 'components/_index';
 
 // Should stay last to override other classes
-@import 'helpers/_index';
+@import 'helpers/_index';

package/src/tokens/font.json

@@ -119,6 +119,40 @@
           "line-height": { "value": "1.38" }
         }
       },
+      "body-copy-bulk": {
+        "default": {
+          "size": {
+            "value": "14px"
+          },
+          "line-height": {
+            "value": "1.71"
+          }
+        },
+        "sm": {
+          "size": {
+            "value": "16px"
+          },
+          "line-height": {
+            "value": "1.75"
+          }
+        },
+        "md": {
+          "size": {
+            "value": "18px"
+          },
+          "line-height": {
+            "value": "1.67"
+          }
+        },
+        "lg": {
+          "size": {
+            "value": "16px"
+          },
+          "line-height": {
+            "value": "1.75"
+          }
+        }
+      },
       "pica": {
         "default": {
           "size": { "value": "15px" },

package/src/typography/font-types.njk

@@ -16,6 +16,9 @@
 <h4>Body copy (Usage: Body copy):</h4>
 <p class="mds-font-body-copy">The quick brown fox jumps over the lazy dog</p>
 
+<h4>Body copy bulk (Usage: Body copy long text):</h4>
+<p class="mds-font-body-copy-bulk">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend accumsan elementum. Praesent quis facilisis elit. Donec vel suscipit leo. Cras tincidunt lacus sed mauris fringilla sodales. Donec facilisis suscipit augue, id pharetra nisl pharetra vitae. Etiam sed est id nulla ultricies accumsan sit amet ac urna. Etiam a neque eu erat rhoncus sollicitudin. Aenean maximus, mauris vitae porttitor varius, metus massa porttitor nulla, ac iaculis turpis tellus quis dui. Maecenas pharetra a ligula sed imperdiet.</p>
+
 <h4>Pica (Usage: Index links, titles or headlines):</h4>
 <p class="mds-font-pica">The quick brown fox jumps over the lazy dog</p>
 

package/src/typography/lists.njk

@@ -33,4 +33,32 @@
   <li class="mds-list__item">One</li>
   <li class="mds-list__item">Two</li>
   <li class="mds-list__item">Three</li>
-</ul>
+</ul>
+
+<h2>Multilevel list</h2>
+<ol class="mds-list mds-list--number mds-list--multilevel">
+  <li class="mds-list__item">
+    one
+  </li>
+  <li class="mds-list__item">
+    <a href="#two">two</a>
+  </li>
+  <li class="mds-list__item">three
+    <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.
+        <ul class="mds-list mds-list--bullet">
+          <li class="mds-list__item">once</li>
+          <li class="mds-list__item">twice</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+  <li class="mds-list__item">
+    <a href="#two">four</a>
+  </li>
+  <li class="mds-list__item">
+    <a href="#two">five</a>
+  </li>
+</ol>