@madgex/design-system 1.47.1 → 1.47.3

package/fractal.js

@@ -50,6 +50,9 @@ fractal.components.set('ext', '.njk');
 fractal.components.set('path', path.join(__dirname, 'src'));
 fractal.components.set('default.collated', 'true');
 fractal.components.set('default.preview', '@preview');
+fractal.components.set('default.context', {
+  tokens,
+});
 
 /*
  * Tell Fractal where to look for documentation pages.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.47.1",
+  "version": "1.47.3",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/inputs/combobox/combobox.js

@@ -0,0 +1,14 @@
+import Combobox from './vue-components/Combobox.vue';
+
+export default {
+  name: 'mds-combobox',
+  component: Combobox,
+  hooks: {
+    connectedCallback() {
+      // If the custom element has loaded, clear up any fallback elements that could cause ID clashes or weirdness in form submission
+      const fallbackInput = this.parentElement.querySelector('input');
+
+      if (fallbackInput) fallbackInput.remove();
+    },
+  },
+};

package/src/components/inputs/multi-select/multi-select.js

@@ -0,0 +1,32 @@
+import MultiSelect from './vue-components/MultiSelect.vue';
+
+const optionsGroupSelector = '.mds-multiselect__checkbox-group';
+const optionSelector = ':scope > .mds-multiselect__checkbox';
+
+function constructOptionsList(rootGroup) {
+  const parentOptions = Array.from(rootGroup.querySelectorAll(optionSelector));
+  return parentOptions.reduce((optionsList, option) => {
+    const childGroup = option.querySelector(optionsGroupSelector);
+    const input = option.querySelector('input');
+    const label = option.querySelector('label');
+    optionsList.push({
+      id: input.id,
+      name: input.name,
+      value: input.value,
+      label: label.innerText,
+      checked: input.checked,
+      children: childGroup ? constructOptionsList(childGroup) : null,
+    });
+    return optionsList;
+  }, []);
+}
+
+export default {
+  name: 'mds-multiselect',
+  component: MultiSelect,
+  hooks: {
+    connectedCallback() {
+      this.options = constructOptionsList(this.parentElement.querySelector(optionsGroupSelector));
+    },
+  },
+};

package/src/js/index-fractal.js

@@ -1,11 +1,9 @@
 import switchStateScript from './fractal-scripts/switch-state';
 import notificationScript from './fractal-scripts/notification';
 import comboboxScript from './fractal-scripts/combobox';
-import multiselectScript from './fractal-scripts/multiselect';
 
 document.addEventListener('DOMContentLoaded', () => {
   switchStateScript.init();
   notificationScript.init();
   comboboxScript.init();
-  multiselectScript.init();
 });

package/src/js/index-vue.js

@@ -1,9 +1,8 @@
 import 'document-register-element/build/document-register-element';
 import Vue from 'vue';
 import vueCustomElement from 'vue-custom-element';
-
-import Combobox from '../components/inputs/combobox/vue-components/Combobox.vue';
-import MultiSelect from '../components/inputs/multi-select/vue-components/MultiSelect.vue';
+import MdsCombobox from '../components/inputs/combobox/combobox';
+import MdsMultiSelect from '../components/inputs/multi-select/multi-select';
 
 Vue.use(vueCustomElement);
 Vue.config.devtools = process.env.NODE_ENV === 'development';
@@ -11,13 +10,6 @@ Vue.config.devtools = process.env.NODE_ENV === 'development';
 Vue.config.keyCodes.end = 35;
 Vue.config.keyCodes.home = 36;
 
-Vue.customElement('mds-combobox', Combobox, {
-  connectedCallback() {
-    // If the custom element has loaded, clear up any fallback elements that could cause ID clashes or weirdness in form submission
-    const fallbackInput = this.parentElement.querySelector('input');
-
-    if (fallbackInput) fallbackInput.remove();
-  },
+[MdsCombobox, MdsMultiSelect].forEach(({ name, component, hooks }) => {
+  Vue.customElement(name, component, hooks);
 });
-
-Vue.customElement('mds-multiselect', MultiSelect);

package/src/scss/core/_lists.scss

@@ -36,13 +36,13 @@
   margin: 0;
 }
 .mds-list__key {
-  @extend .mds-font-minion;
+  @extend .mds-font-brevier;
   font-weight: bold;
   margin-bottom: $mds-size-baseline;
 }
 .mds-list__value {
   margin-bottom: $mds-size-baseline * 3;
-  
+
   &:last-child {
     margin-bottom: 0;
   }

package/src/scss/resets/__index.scss

@@ -18,12 +18,9 @@ a,
 abbr,
 acronym,
 address,
-big,
-cite,
 code,
 del,
 dfn,
-em,
 img,
 ins,
 kbd,
@@ -32,14 +29,9 @@ s,
 samp,
 small,
 strike,
-strong,
-sub,
-sup,
 tt,
 var,
-b,
 u,
-i,
 center,
 dl,
 dt,

package/src/typography/font-types.config.json

@@ -0,0 +1,3 @@
+{
+  "notes": "## Usage\n\n- Canon: H1\n\n- Trafalgar: H4, section header\n\n- Paragon: Primary headline\n\n- Double Pica: Sub header\n\n- Great Primer: Headline title or subtitle\n\n- Body copy: Body copy\n\n- Body copy bulk: Body copy long text\n\n- Pica: Index links, titles or headlines\n\n- Long Primer: Index body copy and image captions\n\n- Brevier: Time stamps and bylines\n\n- Minion: Small header capitals"
+}

package/src/typography/font-types.njk

@@ -1,32 +1,22 @@
-<h4>Canon (Usage: H1):</h4>
-<p class="mds-font-canon">The quick brown fox jumps over the lazy dog</p>
-
-<h4>Trafalgar (Usage: h4, section header):</h4>
-<p class="mds-font-trafalgar">The quick brown fox jumps over the lazy dog</p>
-
-<h4>Paragon (Usage: Primary headline):</h4>
-<p class="mds-font-paragon">The quick brown fox jumps over the lazy dog</p>
-
-<h4>Double Pica (Usage: Sub header):</h4>
-<p class="mds-font-double-pica">The quick brown fox jumps over the lazy dog</p>
-
-<h4>Great Primer (Usage: Headline title or subtitle):</h4>
-<p class="mds-font-great-primer">The quick brown fox jumps over the lazy dog</p>
-
-<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>
-
-<h4>Long Primer (Usage: Index body copy and image captions):</h4>
-<p class="mds-font-long-primer">The quick brown fox jumps over the lazy dog</p>
-
-<h4>Brevier (Usage: Time stamps and bylines):</h4>
-<p class="mds-font-brevier">The quick brown fox jumps over the lazy dog</p>
-
-<h4>Minion (Usage: Small header capitals):</h4>
-<p class="mds-font-minion">The quick brown fox jumps over the lazy dog</p>
+{% for fontName, item in tokens.font.type %}
+<div class="mds-margin-bottom-b5">
+  <h2><strong>{{ fontName | capitalize }}:</strong></h2>
+  {% for viewport, subItem in item %}
+    <ul>
+    <strong>{{ viewport }}</strong>
+    {% for cssProperty, subSubItem in subItem %}
+      <li>{{ cssProperty }}: {{subSubItem.value}}</li>
+    {% endfor %}
+  </ul>
+  {% endfor %}
+  <p><strong>Example: </strong></p>
+  <p class="mds-font-{{ fontName }}">
+  {%- if fontName == '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.
+  {%- else -%}
+    The quick brown fox jumps over the lazy dog
+  {%- endif -%}
+  </p>
+  <hr>
+</div>
+{% endfor %}

package/src/js/fractal-scripts/multiselect.js

@@ -1,37 +0,0 @@
-function constructNode(rootNode) {
-  const localObj = [];
-  const parentNodes = rootNode.querySelectorAll(':scope > .mds-multiselect__checkbox');
-  parentNodes.forEach((node, index) => {
-    let childGroup = 'null';
-    if (node.childElementCount === 3) {
-      childGroup = node.querySelector('.mds-multiselect__checkbox-group');
-    }
-    const input = node.querySelector('input');
-    const label = node.querySelector('label');
-    localObj[`${index}`] = {
-      id: input.id,
-      name: input.name,
-      value: input.value,
-      label: label.innerText,
-      checked: input.checked,
-      children: childGroup !== 'null' ? constructNode(childGroup) : null,
-    };
-  });
-  return localObj;
-}
-
-function bindData() {
-  const elements = Array.from(document.querySelectorAll('.js-mds-multiselect'));
-  elements.forEach((element) => {
-    const vueMultiselect = element.querySelector('mds-multiselect');
-    vueMultiselect.options = constructNode(element.querySelector('.mds-multiselect__checkbox-group'));
-  });
-}
-
-const multiselect = {
-  init: () => {
-    bindData();
-  },
-};
-
-export default multiselect;