@madgex/design-system 1.4.1 → 1.5.0

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2019 15:49:57 GMT
+ * Generated on Wed, 19 Jun 2019 10:50:13 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2019 15:49:57 GMT
+ * Generated on Wed, 19 Jun 2019 10:50:13 GMT
  */
 
 module.exports = {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Tue, 18 Jun 2019 15:49:57 GMT
+  Generated on Wed, 19 Jun 2019 10:50:13 GMT
 */
 
 $mds-color-base: #71767a !default; // Base colour

package/dist/assets/icons.json

@@ -1 +1 @@
-[{"name":"bike"},{"name":"camera"}]
+[{"name":"bike"},{"name":"camera"},{"name":"facebook"},{"name":"linkedin"},{"name":"twitter"}]

package/dist/assets/icons.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="bike" viewBox="0 0 100 100"><path d="M72.918 41.668c-2.082 0-3.957.418-5.625 1.043L62.5 34.793l1.457-3.543h.625c1.25 0 2.082-.832 2.082-2.082s-.832-2.082-2.082-2.082h-6.25c-1.25 0-2.082.832-2.082 2.082s.832 2.082 2.082 2.082h1.043l-.832 2.082H39.582V25H29.164v4.168h6.25V35l-3.75 7.5c-1.457-.625-2.914-.832-4.582-.832-8.125 0-14.582 6.457-14.582 14.582s6.457 14.582 14.582 14.582 14.582-6.457 14.582-14.582c0-5-2.5-9.375-6.25-11.875l2.5-4.793 13.125 18.957h7.5c1.043 7.082 7.082 12.5 14.375 12.5 8.125 0 14.582-6.457 14.582-14.582.004-8.332-6.453-14.789-14.578-14.789zM37.5 56.25c0 5.832-4.582 10.418-10.418 10.418-5.832 0-10.418-4.582-10.418-10.418 0-5.832 4.582-10.418 10.418-10.418.832 0 1.875.207 2.707.418l-4.582 9.168c-.207.207-.207.414-.207.832 0 1.25.832 2.082 2.082 2.082.832 0 1.457-.418 1.875-1.25l4.582-9.168c2.293 2.086 3.96 5.004 3.96 8.336zM63.75 45c-2.707 2.293-4.582 5.418-5.207 9.168h-3.332l5.418-14.375zm2.082 3.543l3.332 5.625h-6.457c.418-2.293 1.668-4.168 3.125-5.625zm-14.375 3.332l-10-14.375h15.625zm21.461 14.793c-5 0-9.168-3.543-10.207-8.332l10.207-.004c1.25 0 2.082-.832 2.082-2.082 0-.418-.207-.832-.418-1.043l-5.207-8.75c1.043-.418 2.293-.625 3.543-.625 5.832 0 10.418 4.582 10.418 10.418-.004 5.832-4.586 10.418-10.418 10.418z"/></symbol><symbol id="camera" viewBox="0 0 100 100"><path d="M56.25 56.25c0 3.453-2.797 6.25-6.25 6.25s-6.25-2.797-6.25-6.25S46.547 50 50 50s6.25 2.797 6.25 6.25"/><path d="M81.25 33.332H64.582L60.414 25H39.582l-4.168 8.332H18.75c-3.543 0-6.25 2.707-6.25 6.25v33.332c0 3.332 2.707 6.25 6.25 6.25h62.5c3.543 0 6.25-2.918 6.25-6.25V39.582c0-3.54-2.707-6.25-6.25-6.25zM50 70.832c-8.125 0-14.582-6.457-14.582-14.582S41.875 41.668 50 41.668s14.582 6.457 14.582 14.582S58.125 70.832 50 70.832z"/></symbol></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="bike" viewBox="0 0 100 100"><path d="M72.918 41.668c-2.082 0-3.957.418-5.625 1.043L62.5 34.793l1.457-3.543h.625c1.25 0 2.082-.832 2.082-2.082s-.832-2.082-2.082-2.082h-6.25c-1.25 0-2.082.832-2.082 2.082s.832 2.082 2.082 2.082h1.043l-.832 2.082H39.582V25H29.164v4.168h6.25V35l-3.75 7.5c-1.457-.625-2.914-.832-4.582-.832-8.125 0-14.582 6.457-14.582 14.582s6.457 14.582 14.582 14.582 14.582-6.457 14.582-14.582c0-5-2.5-9.375-6.25-11.875l2.5-4.793 13.125 18.957h7.5c1.043 7.082 7.082 12.5 14.375 12.5 8.125 0 14.582-6.457 14.582-14.582.004-8.332-6.453-14.789-14.578-14.789zM37.5 56.25c0 5.832-4.582 10.418-10.418 10.418-5.832 0-10.418-4.582-10.418-10.418 0-5.832 4.582-10.418 10.418-10.418.832 0 1.875.207 2.707.418l-4.582 9.168c-.207.207-.207.414-.207.832 0 1.25.832 2.082 2.082 2.082.832 0 1.457-.418 1.875-1.25l4.582-9.168c2.293 2.086 3.96 5.004 3.96 8.336zM63.75 45c-2.707 2.293-4.582 5.418-5.207 9.168h-3.332l5.418-14.375zm2.082 3.543l3.332 5.625h-6.457c.418-2.293 1.668-4.168 3.125-5.625zm-14.375 3.332l-10-14.375h15.625zm21.461 14.793c-5 0-9.168-3.543-10.207-8.332l10.207-.004c1.25 0 2.082-.832 2.082-2.082 0-.418-.207-.832-.418-1.043l-5.207-8.75c1.043-.418 2.293-.625 3.543-.625 5.832 0 10.418 4.582 10.418 10.418-.004 5.832-4.586 10.418-10.418 10.418z"/></symbol><symbol id="camera" viewBox="0 0 100 100"><path d="M56.25 56.25c0 3.453-2.797 6.25-6.25 6.25s-6.25-2.797-6.25-6.25S46.547 50 50 50s6.25 2.797 6.25 6.25"/><path d="M81.25 33.332H64.582L60.414 25H39.582l-4.168 8.332H18.75c-3.543 0-6.25 2.707-6.25 6.25v33.332c0 3.332 2.707 6.25 6.25 6.25h62.5c3.543 0 6.25-2.918 6.25-6.25V39.582c0-3.54-2.707-6.25-6.25-6.25zM50 70.832c-8.125 0-14.582-6.457-14.582-14.582S41.875 41.668 50 41.668s14.582 6.457 14.582 14.582S58.125 70.832 50 70.832z"/></symbol><symbol id="facebook" viewBox="0 0 100 100"><path d="M62.91 25.402H70V13.59L59.66 13c-10.342 0-17.137 6.2-17.137 17.717v9.744H31v13.287h11.523V88h13.886V53.748h11.523l1.773-13.287H56.409v-8.563c0-3.839.886-6.496 6.5-6.496z"/></symbol><symbol id="linkedin" viewBox="0 0 100 100"><g transform="translate(13 13)"><path d="M2.813 24.063h14.688v47.813H2.813z"/><circle cx="10.313" cy="8.75" r="8.438"/><path d="M55.625 22.813C50 22.5 44.375 25.625 41.562 30.625h-.312v-6.563H27.187v47.5h14.688V48.126c0-6.25 1.25-12.188 8.75-12.188s7.813 7.188 7.813 12.5v23.126h14.687V45.624c0-13.125-2.5-22.813-17.5-22.813z"/></g></symbol><symbol id="twitter" viewBox="0 0 100 100"><path d="M97.014 22.084c-3.701 1.449-7.403 2.535-11.104 2.898 4.072-2.536 7.033-6.157 8.513-10.503-3.701 2.173-7.773 3.984-12.214 4.708-7.033-7.605-19.247-8.33-27.02-1.449-5.552 4.708-7.773 11.952-5.922 18.832-15.546-.724-29.981-7.967-39.605-19.918-5.181 8.692-2.59 19.918 5.923 25.35-2.962 0-6.293-1.086-8.884-2.534 0 9.053 6.663 16.659 15.546 18.47l-5.182.724h-3.701c2.59 7.605 9.993 13.037 18.136 13.037-7.032 5.07-15.175 7.967-24.058 7.967H3c8.883 5.433 19.247 8.33 29.61 8.33 29.982.362 54.41-23.54 54.78-52.874v-.725-2.535c3.702-2.535 7.033-6.156 9.624-9.778z"/></symbol></svg>

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Tue, 18 Jun 2019 15:49:57 GMT
+  Generated on Wed, 19 Jun 2019 10:50:13 GMT
 */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
@@ -381,6 +381,19 @@ ul {
   margin-bottom: 12px;
 }
 
+.mds-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  border: 0;
+  white-space: nowrap;
+}
+
 *,
 *::before,
 *::after {
@@ -433,3 +446,10 @@ body {
 .mds-section-title {
   border-bottom: 1px solid #71767a;
 }
+
+.mds-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+}

package/package.json

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

package/src/components/_preview.njk

@@ -7,10 +7,6 @@
 
     <title>{{ _target.title }} - {{ _config.project.title }}</title>
 
-    {% if _config.env !== 'development' %}
-    <link rel="stylesheet" href="{{ '/css/common.css' | path }}" />
-    {% endif %}
-
     <script type="text/javascript" src="{{ '/js/common.js' | path }}"></script>
   </head>
   <body style="padding: 30px;">

package/src/components/icon/README.md

@@ -0,0 +1,13 @@
+## Parameters
+
+- `iconName`: the name of the icon you want to use
+- `classes`: add extra CSS classes to the icon
+- `path`: if you need to use a different path than the default (*/assets/icons.svg*)
+- `visuallyHiddenLabel`: add a visually hidden label (see Accessibility notes below)
+
+
+## Accessibility
+
+The SVGs are hidden from screen readers by default (with the use of `aria-hidden=true` and `focusable=false`). When the icons are used without a visible label, a **visually hidden label needs to be added** instead.
+
+If using the 'Icon' macro, simply pass the parameter `visuallyHiddenLabel` with the label you'd like as its value. It will add a `<span>` next to the SVG that will be visually hidden but accessible to screen readers (thanks to the class `mds-visually-hidden`).

package/src/components/icon/_macro.njk

@@ -0,0 +1,3 @@
+{% macro Icon(params) %}
+    {%- include "./_template.njk" -%}
+{% endmacro %}

package/src/components/icon/_template.njk

@@ -0,0 +1,6 @@
+<svg aria-hidden="true" focusable="false" class="mds-icon mds-icon--{{ params.iconName }}{% if params.classes %} {{ params.classes }}{% endif %}">
+  <use xlink:href="{{ params.path | default('/assets/icons.svg') }}#{{ params.iconName }}" />
+</svg>
+{% if params.visuallyHiddenLabel %}
+  <span class="mds-visually-hidden">{{ params.visuallyHiddenLabel }}</span>
+{% endif %}

package/src/components/icon/icon.config.js

@@ -13,7 +13,7 @@ module.exports = {
     return {
       name: item.name,
       context: {
-        icon: item.name,
+        iconName: item.name,
       },
     };
   }),

package/src/components/icon/icon.njk

@@ -1,3 +1,5 @@
-<svg class="mds-icon mds-icon--{{ icon }}{% if class %} {{ class }}{% endif %}">
-  <use xlink:href="{{ '/assets/icons.svg' | path }}#{{ icon }}" />
-</svg>
+{% from "./icon/_macro.njk" import Icon %}
+
+{{ Icon({
+  iconName: iconName
+}) }}

package/src/icons/facebook.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <g transform="translate(31.000000, 13.000000)">
+            <path d="M31.9090909,12.4015748 L39,12.4015748 L39,0.590551181 L28.6590909,0 C18.3181818,0 11.5227273,6.2007874 11.5227273,17.7165354 L11.5227273,27.4606299 L0,27.4606299 L0,40.7480315 L11.5227273,40.7480315 L11.5227273,75 L25.4090909,75 L25.4090909,40.7480315 L36.9318182,40.7480315 L38.7045455,27.4606299 L25.4090909,27.4606299 L25.4090909,18.8976378 C25.4090909,15.0590551 26.2954545,12.4015748 31.9090909,12.4015748 Z"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/linkedin.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <g transform="translate(13.000000, 13.000000)">
+            <rect x="2.8125" y="24.0625" width="14.6875" height="47.8125"></rect>
+            <circle cx="10.3125" cy="8.75" r="8.4375"></circle>
+            <path d="M55.625,22.8125 C50,22.5 44.375,25.625 41.5625,30.625 L41.25,30.625 L41.25,24.0625 L27.1875,24.0625 L27.1875,71.5625 L41.875,71.5625 L41.875,48.125 C41.875,41.875 43.125,35.9375 50.625,35.9375 C58.125,35.9375 58.4375,43.125 58.4375,48.4375 L58.4375,71.5625 L73.125,71.5625 L73.125,45.625 C73.125,32.5 70.625,22.8125 55.625,22.8125 Z"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/twitter.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <g transform="translate(3.000000, 13.000000)">
+            <path d="M94.0140845,9.08431312 C90.3127426,10.5329203 86.6114007,11.6193756 82.9100588,11.9815274 C86.9815349,9.44646491 89.9426084,5.82494705 91.4231452,1.47912561 C87.7218033,3.65203633 83.6503272,5.46279526 79.2087169,6.18709883 C72.1761672,-1.41808868 59.9617389,-2.14239225 52.1889209,4.73849169 C46.6369081,9.44646491 44.4161029,16.6895006 46.2667739,23.5703846 C30.7211379,22.846081 16.2859044,15.6030453 6.66241544,3.65203633 C1.48053676,12.3436792 4.0714761,23.5703846 12.5845625,29.0026614 C9.62348897,29.0026614 6.29228125,27.916206 3.70134191,26.4675989 C3.70134191,35.5213935 10.3637573,43.126581 19.2469779,44.93734 L14.0650993,45.6616435 L10.3637573,45.6616435 C12.9546967,53.266831 20.3573805,58.6991078 28.5003327,58.6991078 C21.4677831,63.7692328 13.3248309,66.6664471 4.44161029,66.6664471 L0,66.6664471 C8.88322058,72.0987239 19.2469779,74.9959382 29.6107353,74.9959382 C59.5916047,75.35809 84.0204614,51.4560721 84.3905955,22.1217774 C84.3905955,21.7596256 84.3905955,21.7596256 84.3905955,21.3974739 C84.3905955,20.6731703 84.3905955,19.9488667 84.3905955,18.8624113 C88.0919375,16.3273488 91.4231452,12.705831 94.0140845,9.08431312 Z"></path>
+        </g>
+    </g>
+</svg>

package/src/scss/index.scss

@@ -33,3 +33,4 @@ body {
 @import '../components/button/button';
 @import '../components/card/card';
 @import '../components/section-title/section-title';
+@import '../components/icon/icon';

package/src/scss/utilities/_visually-hidden.scss

@@ -18,3 +18,7 @@
   // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   white-space: nowrap;
 }
+
+.mds-visually-hidden {
+  @include mds-visually-hidden;
+}