@madgex/design-system 1.34.0 → 1.35.0

package/.eslintignore

@@ -1,2 +1 @@
 public/themes
-__tests__/**/*

package/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['@madgex/eslint-config-madgex'],
+  extends: ['@madgex/eslint-config-madgex', 'plugin:vue/essential', '@vue/prettier'],
   rules: {
     'import/no-extraneous-dependencies': ['error', { devDependencies: ['*.js', 'tasks/*.js'] }]
   },

package/.prettierrc

@@ -1,7 +1,10 @@
 {
   "useTabs": false,
-  "printWidth": 120,
   "tabWidth": 2,
+  "printWidth": 120,
   "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always",
   "endOfLine": "auto"
 }

package/README.md

@@ -31,7 +31,7 @@ $mds-size-font-md: 20px; // my base font-size is 20px
 
 If you're wanting to use the Madgex DS components from a hapi.js+vision+Nunjucks setup you'll need to include the Madgex DS in the Nunjucks pathing:
 
-```(js)
+```js
   engines: {
     njk: {
       compile: (src, options) => {
@@ -58,7 +58,7 @@ If you're wanting to use the Madgex DS components from a hapi.js+vision+Nunjucks
 
 Then you should be able to use components as such:
 
-```(nunjucks)
+```nunjucks
 {% extends "template.njk" %}  {# a base template is available in the DS #}
 
 {% from "button/_macro.njk" import Button %} {# load the DS button component #}

package/__tests__/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }]
+  },
+  env: {
+    jest: true
+  }
+};

package/__tests__/unit/src/components/combobox.spec.js

@@ -0,0 +1,107 @@
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import Combobox from '../../../../src/components/combobox/vue-components/Combobox.vue';
+
+describe('Combobox', () => {
+  let wrapper;
+  let searchBox;
+  let listBox;
+
+  beforeEach(() => {
+    wrapper = mount(Combobox, {
+      propsData: {
+        comboboxid: 'test',
+        labeltext: 'Test Select',
+        options: [
+          {
+            value: 'dog',
+            label: 'Dog',
+          },
+          {
+            value: 'cat',
+            label: 'Cat',
+          },
+        ],
+      },
+    });
+    searchBox = wrapper.find('input');
+    listBox = wrapper.find('ul');
+  });
+
+  describe('Search box', () => {
+    it('has the correct role', () => {
+      expect(searchBox.attributes('role')).toBe('combobox');
+    });
+
+    it('has the correct labelledby attribute', () => {
+      expect(searchBox.attributes('aria-labelledby')).toBe('test-label');
+    });
+
+    it('controls the listbox', async () => {
+      expect.assertions(1);
+      searchBox.trigger('focus');
+      await Vue.nextTick();
+      expect(searchBox.attributes('aria-owns')).toBe('test-listbox');
+    });
+
+    it('has the correct autocomplete settings', () => {
+      expect(searchBox.attributes('autocomplete')).toBe('off');
+      expect(searchBox.attributes('aria-autocomplete')).toBe('list');
+    });
+
+    it('triggers a search event on input', () => {
+      searchBox.setValue('test search');
+      expect(wrapper.emitted('search')[0]).toEqual(['test search']);
+    });
+
+    it('reduces the options rendered based on the search text', async () => {
+      expect.assertions(1);
+      searchBox.setValue('d');
+      await Vue.nextTick();
+      expect(listBox.findAll('li')).toHaveLength(1);
+    });
+
+    it('does not reduce the options rendered based on the search text when filterOptions prop is false', async () => {
+      expect.assertions(1);
+      wrapper.setProps({
+        filterOptions: false,
+      });
+      searchBox.setValue('d');
+      await Vue.nextTick();
+      expect(listBox.findAll('li')).toHaveLength(2);
+    });
+  });
+
+  describe('Listbox', () => {
+    it('has the correct role', () => {
+      expect(listBox.attributes('role')).toBe('listbox');
+    });
+
+    it('has the correct labelledby attribute', () => {
+      expect(listBox.attributes('aria-labelledby')).toBe('test-label');
+    });
+
+    it('renders the options passed to the select', () => {
+      expect(listBox.findAll('li')).toHaveLength(2);
+    });
+
+    it('allows keyboard navigation of items', async () => {
+      expect.assertions(1);
+      searchBox.trigger('focus');
+      await Vue.nextTick();
+      wrapper.trigger('keydown.down');
+      await Vue.nextTick();
+      expect(wrapper.vm.selectedOption).toBeTruthy();
+    });
+
+    it('triggers a select-option event on option mousedown', () => {
+      listBox.find('li').trigger('mousedown');
+      expect(wrapper.emitted('select-option')[0]).toEqual([
+        {
+          value: 'dog',
+          label: 'Dog',
+        },
+      ]);
+    });
+  });
+});

package/coverage/cobertura-coverage.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" ?>
 <!DOCTYPE coverage SYSTEM "http://cobertura.sourceforge.net/xml/coverage-04.dtd">
-<coverage lines-valid="253" lines-covered="98" line-rate="0.3874" branches-valid="59" branches-covered="19" branch-rate="0.322" timestamp="1578667108262" complexity="0" version="0.1">
+<coverage lines-valid="354" lines-covered="143" line-rate="0.40399999999999997" branches-valid="97" branches-covered="31" branch-rate="0.3196" timestamp="1581616406773" complexity="0" version="0.1">
   <sources>
     <source>/var/lib/jenkins/jobs/madgex-design-system/branches/master/workspace</source>
   </sources>
@@ -125,6 +125,233 @@
         </class>
       </classes>
     </package>
+    <package name="components.combobox" line-rate="0" branch-rate="0">
+      <classes>
+        <class name="combobox.js" filename="src/components/combobox/combobox.js" line-rate="0" branch-rate="0">
+          <methods>
+            <method name="(anonymous_0)" hits="0" signature="()V">
+              <lines>
+                <line number="13" hits="0"/>
+              </lines>
+            </method>
+          </methods>
+          <lines>
+            <line number="6" hits="0" branch="false"/>
+            <line number="7" hits="0" branch="false"/>
+            <line number="9" hits="0" branch="false"/>
+            <line number="10" hits="0" branch="false"/>
+            <line number="12" hits="0" branch="false"/>
+            <line number="15" hits="0" branch="false"/>
+            <line number="16" hits="0" branch="false"/>
+            <line number="17" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="18" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+          </lines>
+        </class>
+      </classes>
+    </package>
+    <package name="components.combobox.vue-components" line-rate="0.7759" branch-rate="0.5455">
+      <classes>
+        <class name="Combobox.vue" filename="src/components/combobox/vue-components/Combobox.vue" line-rate="0.7759" branch-rate="0.5455">
+          <methods>
+            <method name="_default" hits="0" signature="()V">
+              <lines>
+                <line number="78" hits="0"/>
+              </lines>
+            </method>
+            <method name="data" hits="12" signature="()V">
+              <lines>
+                <line number="85" hits="12"/>
+              </lines>
+            </method>
+            <method name="get" hits="16" signature="()V">
+              <lines>
+                <line number="95" hits="16"/>
+              </lines>
+            </method>
+            <method name="set" hits="3" signature="()V">
+              <lines>
+                <line number="101" hits="3"/>
+              </lines>
+            </method>
+            <method name="get" hits="14" signature="()V">
+              <lines>
+                <line number="110" hits="14"/>
+              </lines>
+            </method>
+            <method name="set" hits="7" signature="()V">
+              <lines>
+                <line number="113" hits="7"/>
+              </lines>
+            </method>
+            <method name="get" hits="13" signature="()V">
+              <lines>
+                <line number="118" hits="13"/>
+              </lines>
+            </method>
+            <method name="set" hits="4" signature="()V">
+              <lines>
+                <line number="121" hits="4"/>
+              </lines>
+            </method>
+            <method name="visibleOptions" hits="15" signature="()V">
+              <lines>
+                <line number="127" hits="15"/>
+              </lines>
+            </method>
+            <method name="(anonymous_10)" hits="28" signature="()V">
+              <lines>
+                <line number="129" hits="28"/>
+              </lines>
+            </method>
+            <method name="labelId" hits="12" signature="()V">
+              <lines>
+                <line number="133" hits="12"/>
+              </lines>
+            </method>
+            <method name="listBoxId" hits="12" signature="()V">
+              <lines>
+                <line number="136" hits="12"/>
+              </lines>
+            </method>
+            <method name="optionId" hits="12" signature="()V">
+              <lines>
+                <line number="139" hits="12"/>
+              </lines>
+            </method>
+            <method name="selectedOptionId" hits="17" signature="()V">
+              <lines>
+                <line number="142" hits="17"/>
+              </lines>
+            </method>
+            <method name="listBoxHidden" hits="17" signature="()V">
+              <lines>
+                <line number="149" hits="17"/>
+              </lines>
+            </method>
+            <method name="lastOptionIndex" hits="1" signature="()V">
+              <lines>
+                <line number="152" hits="1"/>
+              </lines>
+            </method>
+            <method name="resultCount" hits="15" signature="()V">
+              <lines>
+                <line number="155" hits="15"/>
+              </lines>
+            </method>
+            <method name="makeActive" hits="5" signature="()V">
+              <lines>
+                <line number="163" hits="5"/>
+              </lines>
+            </method>
+            <method name="makeInactive" hits="1" signature="()V">
+              <lines>
+                <line number="166" hits="1"/>
+              </lines>
+            </method>
+            <method name="clickOption" hits="1" signature="()V">
+              <lines>
+                <line number="169" hits="1"/>
+              </lines>
+            </method>
+            <method name="chooseOption" hits="0" signature="()V">
+              <lines>
+                <line number="173" hits="0"/>
+              </lines>
+            </method>
+            <method name="hiddenGuard" hits="3" signature="()V">
+              <lines>
+                <line number="177" hits="3"/>
+              </lines>
+            </method>
+            <method name="onInputBlur" hits="0" signature="()V">
+              <lines>
+                <line number="181" hits="0"/>
+              </lines>
+            </method>
+            <method name="onKeyDown" hits="1" signature="()V">
+              <lines>
+                <line number="184" hits="1"/>
+              </lines>
+            </method>
+            <method name="onKeyUp" hits="0" signature="()V">
+              <lines>
+                <line number="193" hits="0"/>
+              </lines>
+            </method>
+            <method name="onKeyHome" hits="1" signature="()V">
+              <lines>
+                <line number="202" hits="1"/>
+              </lines>
+            </method>
+            <method name="onKeyEnd" hits="1" signature="()V">
+              <lines>
+                <line number="205" hits="1"/>
+              </lines>
+            </method>
+          </methods>
+          <lines>
+            <line number="44" hits="1" branch="false"/>
+            <line number="45" hits="1" branch="false"/>
+            <line number="46" hits="1" branch="false"/>
+            <line number="78" hits="0" branch="false"/>
+            <line number="86" hits="12" branch="false"/>
+            <line number="96" hits="16" branch="true" condition-coverage="100% (2/2)"/>
+            <line number="97" hits="1" branch="false"/>
+            <line number="99" hits="15" branch="false"/>
+            <line number="103" hits="3" branch="false"/>
+            <line number="104" hits="3" branch="true" condition-coverage="50% (1/2)"/>
+            <line number="105" hits="3" branch="false"/>
+            <line number="106" hits="3" branch="false"/>
+            <line number="111" hits="14" branch="false"/>
+            <line number="114" hits="7" branch="false"/>
+            <line number="119" hits="13" branch="false"/>
+            <line number="122" hits="4" branch="false"/>
+            <line number="123" hits="4" branch="false"/>
+            <line number="124" hits="4" branch="false"/>
+            <line number="127" hits="15" branch="false"/>
+            <line number="128" hits="15" branch="true" condition-coverage="100% (2/2)"/>
+            <line number="129" hits="42" branch="false"/>
+            <line number="131" hits="1" branch="false"/>
+            <line number="134" hits="12" branch="false"/>
+            <line number="137" hits="12" branch="false"/>
+            <line number="140" hits="12" branch="false"/>
+            <line number="143" hits="17" branch="false"/>
+            <line number="144" hits="17" branch="true" condition-coverage="100% (2/2)"/>
+            <line number="145" hits="2" branch="false"/>
+            <line number="147" hits="15" branch="false"/>
+            <line number="150" hits="17" branch="false"/>
+            <line number="153" hits="1" branch="false"/>
+            <line number="156" hits="15" branch="true" condition-coverage="50% (1/2)"/>
+            <line number="157" hits="0" branch="false"/>
+            <line number="159" hits="15" branch="false"/>
+            <line number="164" hits="5" branch="false"/>
+            <line number="167" hits="1" branch="false"/>
+            <line number="169" hits="1" branch="true" condition-coverage="100% (2/2)"/>
+            <line number="170" hits="1" branch="false"/>
+            <line number="171" hits="1" branch="false"/>
+            <line number="174" hits="0" branch="false"/>
+            <line number="175" hits="0" branch="false"/>
+            <line number="178" hits="3" branch="true" condition-coverage="50% (1/2)"/>
+            <line number="179" hits="3" branch="false"/>
+            <line number="182" hits="0" branch="false"/>
+            <line number="185" hits="1" branch="true" condition-coverage="50% (1/2)"/>
+            <line number="186" hits="0" branch="false"/>
+            <line number="187" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="188" hits="0" branch="false"/>
+            <line number="189" hits="1" branch="false"/>
+            <line number="190" hits="1" branch="false"/>
+            <line number="194" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="195" hits="0" branch="false"/>
+            <line number="196" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="197" hits="0" branch="false"/>
+            <line number="199" hits="0" branch="false"/>
+            <line number="202" hits="1" branch="false"/>
+            <line number="203" hits="1" branch="false"/>
+            <line number="206" hits="1" branch="false"/>
+          </lines>
+        </class>
+      </classes>
+    </package>
     <package name="components.notification" line-rate="0.9286" branch-rate="1">
       <classes>
         <class name="notification.js" filename="src/components/notification/notification.js" line-rate="0.9286" branch-rate="1">
@@ -507,14 +734,15 @@
           <methods>
             <method name="(anonymous_0)" hits="0" signature="()V">
               <lines>
-                <line number="4" hits="0"/>
+                <line number="5" hits="0"/>
               </lines>
             </method>
           </methods>
           <lines>
-            <line number="4" hits="0" branch="false"/>
             <line number="5" hits="0" branch="false"/>
             <line number="6" hits="0" branch="false"/>
+            <line number="7" hits="0" branch="false"/>
+            <line number="8" hits="0" branch="false"/>
           </lines>
         </class>
         <class name="index-polyfills.js" filename="src/js/index-polyfills.js" line-rate="1" branch-rate="1">
@@ -542,6 +770,86 @@
     </package>
     <package name="js.fractal-scripts" line-rate="0" branch-rate="0">
       <classes>
+        <class name="combobox.js" filename="src/js/fractal-scripts/combobox.js" line-rate="0" branch-rate="0">
+          <methods>
+            <method name="bindToSelect" hits="0" signature="()V">
+              <lines>
+                <line number="4" hits="0"/>
+              </lines>
+            </method>
+            <method name="(anonymous_1)" hits="0" signature="()V">
+              <lines>
+                <line number="10" hits="0"/>
+              </lines>
+            </method>
+            <method name="(anonymous_2)" hits="0" signature="()V">
+              <lines>
+                <line number="11" hits="0"/>
+              </lines>
+            </method>
+            <method name="bindToApi" hits="0" signature="()V">
+              <lines>
+                <line number="20" hits="0"/>
+              </lines>
+            </method>
+            <method name="(anonymous_4)" hits="0" signature="()V">
+              <lines>
+                <line number="25" hits="0"/>
+              </lines>
+            </method>
+            <method name="(anonymous_5)" hits="0" signature="()V">
+              <lines>
+                <line number="29" hits="0"/>
+              </lines>
+            </method>
+            <method name="(anonymous_6)" hits="0" signature="()V">
+              <lines>
+                <line number="30" hits="0"/>
+              </lines>
+            </method>
+            <method name="(anonymous_7)" hits="0" signature="()V">
+              <lines>
+                <line number="31" hits="0"/>
+              </lines>
+            </method>
+            <method name="(anonymous_8)" hits="0" signature="()V">
+              <lines>
+                <line number="44" hits="0"/>
+              </lines>
+            </method>
+          </methods>
+          <lines>
+            <line number="1" hits="0" branch="false"/>
+            <line number="2" hits="0" branch="false"/>
+            <line number="5" hits="0" branch="false"/>
+            <line number="6" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="7" hits="0" branch="false"/>
+            <line number="8" hits="0" branch="false"/>
+            <line number="9" hits="0" branch="false"/>
+            <line number="10" hits="0" branch="false"/>
+            <line number="11" hits="0" branch="false"/>
+            <line number="12" hits="0" branch="false"/>
+            <line number="13" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="14" hits="0" branch="false"/>
+            <line number="15" hits="0" branch="false"/>
+            <line number="21" hits="0" branch="false"/>
+            <line number="22" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="23" hits="0" branch="false"/>
+            <line number="24" hits="0" branch="false"/>
+            <line number="25" hits="0" branch="false"/>
+            <line number="26" hits="0" branch="false"/>
+            <line number="27" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="28" hits="0" branch="false"/>
+            <line number="29" hits="0" branch="false"/>
+            <line number="31" hits="0" branch="false"/>
+            <line number="32" hits="0" branch="false"/>
+            <line number="33" hits="0" branch="false"/>
+            <line number="37" hits="0" branch="false"/>
+            <line number="43" hits="0" branch="false"/>
+            <line number="45" hits="0" branch="false"/>
+            <line number="46" hits="0" branch="false"/>
+          </lines>
+        </class>
         <class name="notification.js" filename="src/js/fractal-scripts/notification.js" line-rate="0" branch-rate="1">
           <methods>
             <method name="(anonymous_0)" hits="0" signature="()V">
@@ -632,6 +940,21 @@
             <line number="14" hits="0" branch="false"/>
           </lines>
         </class>
+        <class name="remove.js" filename="src/js/polyfills/remove.js" line-rate="0" branch-rate="0">
+          <methods>
+            <method name="remove" hits="0" signature="()V">
+              <lines>
+                <line number="2" hits="0"/>
+              </lines>
+            </method>
+          </methods>
+          <lines>
+            <line number="1" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="2" hits="0" branch="false"/>
+            <line number="3" hits="0" branch="true" condition-coverage="0% (0/2)"/>
+            <line number="4" hits="0" branch="false"/>
+          </lines>
+        </class>
       </classes>
     </package>
     <package name="tokens" line-rate="0" branch-rate="1">