@madgex/design-system 3.0.1 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/.eslintignore +2 -0
  2. package/.eslintrc.js +3 -3
  3. package/README.md +0 -2
  4. package/__tests__/.eslintrc.js +3 -3
  5. package/__tests__/unit/src/components/combobox.spec.js +4 -28
  6. package/__tests__/unit/src/components/notification.spec.js +14 -12
  7. package/__tests__/unit/src/components/popover.spec.js +4 -0
  8. package/__tests__/unit/tasks/css.spec.js +3 -2
  9. package/__tests__/unit/tasks/jsbundle.spec.js +3 -2
  10. package/__tests__/unit/tasks/svgsprite.spec.js +3 -2
  11. package/__tests__/unit/tasks/tokens.spec.js +3 -2
  12. package/coverage/cobertura-coverage.xml +389 -389
  13. package/coverage/components/accordion/accordion.js.html +164 -127
  14. package/coverage/components/accordion/index.html +23 -22
  15. package/coverage/components/button/button.js.html +3 -2
  16. package/coverage/components/button/index.html +3 -2
  17. package/coverage/components/inputs/combobox/combobox.js.html +3 -2
  18. package/coverage/components/inputs/combobox/index.html +3 -2
  19. package/coverage/components/inputs/combobox/vue-components/Combobox.vue.html +55 -54
  20. package/coverage/components/inputs/combobox/vue-components/ListBoxOption.vue.html +9 -8
  21. package/coverage/components/inputs/combobox/vue-components/index.html +21 -20
  22. package/coverage/components/inputs/file-upload/file-upload.js.html +7 -3
  23. package/coverage/components/inputs/file-upload/index.html +3 -2
  24. package/coverage/components/inputs/textarea/character-count.js.html +13 -3
  25. package/coverage/components/inputs/textarea/index.html +3 -2
  26. package/coverage/components/modal/index.html +23 -22
  27. package/coverage/components/modal/modal.js.html +118 -111
  28. package/coverage/components/notification/index.html +3 -2
  29. package/coverage/components/notification/notification.js.html +13 -3
  30. package/coverage/components/popover/index.html +3 -2
  31. package/coverage/components/popover/popover.js.html +3 -2
  32. package/coverage/components/switch-state/index.html +19 -18
  33. package/coverage/components/switch-state/switch-state.js.html +22 -21
  34. package/coverage/components/tabs/index.html +3 -2
  35. package/coverage/components/tabs/tabs.js.html +37 -3
  36. package/coverage/favicon.png +0 -0
  37. package/coverage/index.html +52 -51
  38. package/coverage/js/common.js.html +3 -2
  39. package/coverage/js/fractal-scripts/combobox.js.html +22 -3
  40. package/coverage/js/fractal-scripts/index.html +3 -2
  41. package/coverage/js/fractal-scripts/notification.js.html +13 -3
  42. package/coverage/js/fractal-scripts/switch-state.js.html +13 -3
  43. package/coverage/js/index-fractal.js.html +3 -2
  44. package/coverage/js/index-polyfills.js.html +3 -2
  45. package/coverage/js/index-vue.js.html +3 -2
  46. package/coverage/js/index.html +3 -2
  47. package/coverage/js/index.js.html +3 -2
  48. package/coverage/js/polyfills/arrayPrototypeFind.js.html +20 -10
  49. package/coverage/js/polyfills/closest.js.html +8 -4
  50. package/coverage/js/polyfills/index.html +3 -2
  51. package/coverage/js/polyfills/objectAssign.js.html +19 -9
  52. package/coverage/js/polyfills/remove.js.html +3 -2
  53. package/coverage/tokens/_config.js.html +3 -2
  54. package/coverage/tokens/index.html +3 -2
  55. package/cypress/.eslintrc.js +6 -6
  56. package/cypress/fixtures/testuploadfile.txt +1 -0
  57. package/cypress/integration/components/accordion.spec.js +40 -3
  58. package/cypress/integration/components/button.spec.js +2 -3
  59. package/cypress/integration/components/card.spec.js +2 -3
  60. package/cypress/integration/components/icons.spec.js +10 -0
  61. package/cypress/integration/components/{combobox.spec.js → inputs/combobox.spec.js} +6 -0
  62. package/cypress/integration/components/inputs/file-upload.spec.js +45 -0
  63. package/cypress/integration/components/{input.spec.js → inputs/input.spec.js} +1 -1
  64. package/cypress/integration/components/inputs/label.spec.js +15 -0
  65. package/cypress/integration/components/inputs/radio.spec.js +20 -0
  66. package/cypress/integration/components/inputs/select.spec.js +31 -0
  67. package/cypress/integration/components/inputs/textarea.spec.js +23 -0
  68. package/cypress/integration/components/modal.spec.js +65 -0
  69. package/cypress/integration/components/notifications.spec.js +35 -0
  70. package/cypress/integration/components/popover.spec.js +36 -0
  71. package/cypress/integration/components/skip-link.spec.js +9 -0
  72. package/cypress/plugins/index.js +1 -1
  73. package/cypress/support/commands.js +14 -0
  74. package/cypress/support/index.js +2 -0
  75. package/dist/_tokens/css/_tokens.css +1 -1
  76. package/dist/_tokens/js/_tokens-module.js +455 -1
  77. package/dist/_tokens/scss/_tokens.scss +4 -4
  78. package/dist/assets/icons.json +1 -1
  79. package/dist/assets/icons.svg +6 -1
  80. package/dist/js/index.js +1 -1
  81. package/fractal.js +2 -0
  82. package/package.json +60 -55
  83. package/server.js +1 -1
  84. package/src/components/accordion/accordion.config.js +9 -12
  85. package/src/components/accordion/accordion.js +12 -0
  86. package/src/components/inputs/file-upload/file-upload.js +1 -0
  87. package/src/components/inputs/textarea/character-count.js +3 -0
  88. package/src/components/modal/modal.js +3 -1
  89. package/src/components/notification/notification.js +3 -0
  90. package/src/components/skip-link/skip-link.njk +11 -1
  91. package/src/components/tabs/tabs.js +11 -0
  92. package/src/js/fractal-scripts/combobox.js +6 -0
  93. package/src/js/fractal-scripts/notification.js +3 -0
  94. package/src/js/fractal-scripts/switch-state.js +3 -0
  95. package/src/js/polyfills/arrayPrototypeFind.js +9 -6
  96. package/src/js/polyfills/closest.js +2 -1
  97. package/src/js/polyfills/objectAssign.js +9 -6
  98. package/tasks/colorTransforms.js +4 -0
  99. package/tasks/createMacroIndex.js +1 -0
  100. package/tasks/css.js +3 -0
  101. package/tasks/fractal.js +2 -0
  102. package/tasks/js-bundle.js +6 -2
  103. package/tasks/svgsprite.js +31 -21
  104. package/tasks/tokens.js +2 -0
  105. package/__tests__/unit/src/components/accordion.spec.js +0 -88
  106. package/__tests__/unit/src/components/modal.spec.js +0 -87
  107. package/__tests__/unit/src/components/switch-state.spec.js +0 -21
  108. package/cypress/integration/components/textarea.spec.js +0 -9
  109. /package/cypress/integration/components/{checkbox-list.spec.js → inputs/checkbox-list.spec.js} +0 -0
  110. /package/cypress/integration/components/{single-checkbox.spec.js → inputs/single-checkbox.spec.js} +0 -0
package/.eslintignore CHANGED
@@ -1 +1,3 @@
1
1
  public/themes
2
+ dist
3
+ public
package/.eslintrc.js CHANGED
@@ -1,9 +1,9 @@
1
1
  module.exports = {
2
2
  extends: ['@madgex/eslint-config-madgex', 'plugin:vue/essential', '@vue/prettier'],
3
3
  rules: {
4
- 'import/no-extraneous-dependencies': ['error', { devDependencies: ['*.js', 'tasks/*.js'] }]
4
+ 'import/no-extraneous-dependencies': ['error', { devDependencies: ['*.js', 'tasks/*.js'] }],
5
5
  },
6
6
  env: {
7
- browser: true
8
- }
7
+ browser: true,
8
+ },
9
9
  };
package/README.md CHANGED
@@ -82,5 +82,3 @@ Note you'll need the scss for the component styles.
82
82
  ## Releases
83
83
 
84
84
  With every commit to `master` the build server attempts to create a new version using [semantic-release](https://semantic-release.gitbook.io/semantic-release/) and deploys to [npm](https://npmjs.org) as [@madgex/design-system](https://www.npmjs.com/package/@madgex/design-system).
85
-
86
- .
@@ -1,8 +1,8 @@
1
1
  module.exports = {
2
2
  rules: {
3
- 'import/no-extraneous-dependencies': ['error', { devDependencies: true }]
3
+ 'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
4
4
  },
5
5
  env: {
6
- jest: true
7
- }
6
+ jest: true,
7
+ },
8
8
  };
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jest-environment jsdom
3
+ */
4
+
1
5
  import Vue from 'vue';
2
6
  import { mount } from '@vue/test-utils';
3
7
  import Combobox from '../../../../src/components/inputs/combobox/vue-components/Combobox.vue';
@@ -32,22 +36,6 @@ describe('Combobox', () => {
32
36
  });
33
37
 
34
38
  describe('Search box', () => {
35
- it('has the correct role', () => {
36
- expect(searchBox.attributes('role')).toBe('combobox');
37
- });
38
-
39
- it('controls the listbox', async () => {
40
- expect.assertions(1);
41
- searchBox.trigger('focus');
42
- await Vue.nextTick();
43
- expect(searchBox.attributes('aria-owns')).toBe('test-listbox');
44
- });
45
-
46
- it('has the correct autocomplete settings', () => {
47
- expect(searchBox.attributes('autocomplete')).toBe('off');
48
- expect(searchBox.attributes('aria-autocomplete')).toBe('list');
49
- });
50
-
51
39
  it('triggers a search event on input', () => {
52
40
  searchBox.setValue('test search');
53
41
  expect(wrapper.emitted('search')[0]).toEqual(['test search']);
@@ -72,22 +60,10 @@ describe('Combobox', () => {
72
60
  });
73
61
 
74
62
  describe('Listbox', () => {
75
- it('has the correct role', () => {
76
- expect(listBox.attributes('role')).toBe('listbox');
77
- });
78
63
  it('renders the options passed to the select', () => {
79
64
  expect(listBox.findAll('li')).toHaveLength(2);
80
65
  });
81
66
 
82
- it('allows keyboard navigation of items', async () => {
83
- expect.assertions(1);
84
- searchBox.setValue('dog');
85
- await Vue.nextTick();
86
- wrapper.trigger('keydown.down');
87
- await Vue.nextTick();
88
- expect(wrapper.vm.selectedOption).toBeTruthy();
89
- });
90
-
91
67
  it('triggers a select-option event on option mousedown', () => {
92
68
  listBox.find('li').trigger('mousedown');
93
69
  expect(wrapper.emitted('select-option')[0]).toEqual([
@@ -1,34 +1,37 @@
1
- jest.unmock('../../../../src/components/notification/notification');
1
+ /**
2
+ * @jest-environment jsdom
3
+ */
4
+
2
5
  import notification from '../../../../src/components/notification/notification';
3
6
 
7
+ jest.unmock('../../../../src/components/notification/notification');
8
+
4
9
  jest.useFakeTimers();
5
10
 
6
11
  // Avoid document.createRange not defined error
7
12
  if (window.document) {
8
13
  window.document.createRange = () => ({
9
- setStart: () => {},
10
- setEnd: () => {},
11
- commonAncestorContainer: {
12
- nodeName: 'BODY',
13
- ownerDocument: document,
14
- },
14
+ setStart: () => {},
15
+ setEnd: () => {},
16
+ commonAncestorContainer: {
17
+ nodeName: 'BODY',
18
+ ownerDocument: document,
19
+ },
15
20
  });
16
21
  }
17
22
 
18
23
  const { body } = document;
19
24
  const message = document.createElement('div');
25
+
20
26
  message.setAttribute('role', 'alert');
21
27
  message.classList.add('mds-notification', 'mds-message', 'mds-message--success');
22
28
  message.innerText = 'test';
23
-
24
29
 
25
30
  afterEach(() => {
26
31
  document.body.innerHTML = '';
27
32
  });
28
33
 
29
-
30
34
  describe('notification function', () => {
31
-
32
35
  it('`show` adds message div inside the body', async () => {
33
36
  notification.show(body, message);
34
37
  expect.assertions(1);
@@ -50,6 +53,5 @@ describe('notification function', () => {
50
53
  expect(setTimeout).toHaveBeenCalledTimes(1);
51
54
  expect(notification.hide).toBeCalled();
52
55
  jest.clearAllTimers();
53
- });
56
+ });
54
57
  });
55
-
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jest-environment jsdom
3
+ */
4
+
1
5
  import popovers from '../../../../src/components/popover/popover';
2
6
 
3
7
  // Avoid document.createRange not defined error
@@ -1,5 +1,6 @@
1
- const {css} = require('../../../tasks/css');
1
+ const { css } = require('../../../tasks/css');
2
+
2
3
  describe('CSS', () => {
3
4
  beforeEach(() => {});
4
5
  it.skip('correctly creates the css folder', () => {});
5
- });
6
+ });
@@ -1,5 +1,6 @@
1
- const {jsbundle} = require('../../../tasks/js-bundle');
1
+ const { jsbundle } = require('../../../tasks/js-bundle');
2
+
2
3
  describe('JS Bundle', () => {
3
4
  beforeEach(() => {});
4
5
  it.skip('correctly creates the js bundles', () => {});
5
- });
6
+ });
@@ -1,5 +1,6 @@
1
- const {svgsprite} = require('../../../tasks/svgsprite');
1
+ const { svgsprite } = require('../../../tasks/svgsprite');
2
+
2
3
  describe('SVGSprite', () => {
3
4
  beforeEach(() => {});
4
5
  it.skip('correctly creates the SVG sprites', () => {});
5
- });
6
+ });
@@ -1,5 +1,6 @@
1
- const {tokens} = require('../../../tasks/tokens');
1
+ const { tokens } = require('../../../tasks/tokens');
2
+
2
3
  describe('Tokens', () => {
3
4
  beforeEach(() => {});
4
5
  it.skip('correctly creates the token folder', () => {});
5
- });
6
+ });