@madgex/design-system 3.2.6 → 3.4.0

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 (62) hide show
  1. package/README.md +10 -0
  2. package/coverage/cobertura-coverage.xml +1 -1
  3. package/coverage/components/accordion/accordion.js.html +1 -1
  4. package/coverage/components/accordion/index.html +1 -1
  5. package/coverage/components/button/button.js.html +1 -1
  6. package/coverage/components/button/index.html +1 -1
  7. package/coverage/components/inputs/combobox/combobox.js.html +1 -1
  8. package/coverage/components/inputs/combobox/index.html +1 -1
  9. package/coverage/components/inputs/combobox/vue-components/Combobox.vue.html +1 -1
  10. package/coverage/components/inputs/combobox/vue-components/ListBoxOption.vue.html +1 -1
  11. package/coverage/components/inputs/combobox/vue-components/index.html +1 -1
  12. package/coverage/components/inputs/file-upload/file-upload.js.html +1 -1
  13. package/coverage/components/inputs/file-upload/index.html +1 -1
  14. package/coverage/components/inputs/textarea/character-count.js.html +1 -1
  15. package/coverage/components/inputs/textarea/index.html +1 -1
  16. package/coverage/components/modal/index.html +1 -1
  17. package/coverage/components/modal/modal.js.html +1 -1
  18. package/coverage/components/notification/index.html +1 -1
  19. package/coverage/components/notification/notification.js.html +1 -1
  20. package/coverage/components/popover/index.html +1 -1
  21. package/coverage/components/popover/popover.js.html +1 -1
  22. package/coverage/components/switch-state/index.html +1 -1
  23. package/coverage/components/switch-state/switch-state.js.html +1 -1
  24. package/coverage/components/tabs/index.html +1 -1
  25. package/coverage/components/tabs/tabs.js.html +1 -1
  26. package/coverage/index.html +1 -1
  27. package/coverage/js/common.js.html +1 -1
  28. package/coverage/js/fractal-scripts/combobox.js.html +1 -1
  29. package/coverage/js/fractal-scripts/index.html +1 -1
  30. package/coverage/js/fractal-scripts/notification.js.html +1 -1
  31. package/coverage/js/fractal-scripts/switch-state.js.html +1 -1
  32. package/coverage/js/index-fractal.js.html +1 -1
  33. package/coverage/js/index-polyfills.js.html +1 -1
  34. package/coverage/js/index-vue.js.html +1 -1
  35. package/coverage/js/index.html +1 -1
  36. package/coverage/js/index.js.html +1 -1
  37. package/coverage/js/polyfills/arrayPrototypeFind.js.html +1 -1
  38. package/coverage/js/polyfills/closest.js.html +1 -1
  39. package/coverage/js/polyfills/index.html +1 -1
  40. package/coverage/js/polyfills/objectAssign.js.html +1 -1
  41. package/coverage/js/polyfills/remove.js.html +1 -1
  42. package/coverage/tokens/_config.js.html +1 -1
  43. package/coverage/tokens/index.html +1 -1
  44. package/dist/_tokens/css/_tokens.css +1 -1
  45. package/dist/_tokens/js/_tokens-module.js +1 -1
  46. package/dist/_tokens/scss/_tokens.scss +1 -1
  47. package/dist/assets/icons.json +1 -1
  48. package/dist/css/index.css +1 -1
  49. package/package.json +1 -1
  50. package/src/components/button/README.md +2 -0
  51. package/src/components/button/button.config.js +8 -0
  52. package/src/components/button/button.njk +14 -1
  53. package/src/components/button/button.scss +4 -1
  54. package/src/components/inputs/input/README.md +2 -1
  55. package/src/components/inputs/input/_template.njk +17 -17
  56. package/src/layout/grid/README.md +2 -0
  57. package/src/layout/grid/grid.njk +6 -0
  58. package/src/scss/core/_grid.scss +15 -0
  59. package/src/scss/helpers/__index.scss +3 -2
  60. package/src/scss/helpers/_text-formatting.scss +3 -0
  61. package/src/scss/helpers/_width-height.scss +23 -0
  62. package/src/scss/helpers/_width.scss +0 -19
package/src/scss/core/_grid.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /* Source: https://github.com/kristoferjoseph/flexboxgrid */
2
2
 
3
3
  $mds-half-gutter-width: $mds-size-gutter-width * 0.5;
4
+ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
4
5
 
5
6
  .mds-grid-row {
6
7
  box-sizing: border-box;
@@ -12,6 +13,11 @@ $mds-half-gutter-width: $mds-size-gutter-width * 0.5;
12
13
  margin-left: $mds-half-gutter-width * -1;
13
14
  }
14
15
 
16
+ .mds-grid-row.mds-grid-small {
17
+ margin-right: $mds-quarter-gutter-width * -1;
18
+ margin-left: $mds-quarter-gutter-width * -1;
19
+ }
20
+
15
21
  .mds-grid-row.mds-grid-reverse {
16
22
  flex-direction: row-reverse;
17
23
  }
@@ -50,6 +56,11 @@ $mds-half-gutter-width: $mds-size-gutter-width * 0.5;
50
56
  flex: 0 0 auto;
51
57
  padding-right: $mds-half-gutter-width;
52
58
  padding-left: $mds-half-gutter-width;
59
+
60
+ .mds-grid-small & {
61
+ padding-right: $mds-quarter-gutter-width;
62
+ padding-left: $mds-quarter-gutter-width;
63
+ }
53
64
  }
54
65
 
55
66
  .mds-grid-col {
@@ -209,6 +220,10 @@ $mds-half-gutter-width: $mds-size-gutter-width * 0.5;
209
220
  order: 1;
210
221
  }
211
222
 
223
+ .mds-grid-grow-0 {
224
+ flex-grow: 0;
225
+ }
226
+
212
227
  @media only screen and (min-width: $mds-size-breakpoint-sm) {
213
228
  .mds-grid-col-sm,
214
229
  .mds-grid-col-sm-1,
package/src/scss/helpers/__index.scss CHANGED
@@ -5,7 +5,8 @@
5
5
  @import 'display';
6
6
  @import 'borders';
7
7
  @import 'edited-text';
8
- @import 'width';
8
+ @import 'width-height';
9
9
  @import 'fluid-video';
10
10
  @import 'animation';
11
- @import 'vertical-align';
11
+ @import 'vertical-align';
12
+ @import 'text-formatting'
package/src/scss/helpers/_text-formatting.scss ADDED
@@ -0,0 +1,3 @@
1
+ .mds-whitespace-nowrap {
2
+ white-space: nowrap;
3
+ }
package/src/scss/helpers/_width-height.scss ADDED
@@ -0,0 +1,23 @@
1
+ $breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
2
+
3
+ .mds-width-full {
4
+ width: 100%;
5
+ }
6
+ .mds-width-auto {
7
+ width: auto;
8
+ }
9
+
10
+ @each $bpname, $value in $breakpoints {
11
+ @include mq($from: $bpname) {
12
+ .mds-width-#{$bpname}-full {
13
+ width: 100%;
14
+ }
15
+ .mds-width-#{$bpname}-auto {
16
+ width: auto;
17
+ }
18
+ }
19
+ }
20
+
21
+ .mds-height-full {
22
+ height: 100%;
23
+ }
package/src/scss/helpers/_width.scss DELETED
@@ -1,19 +0,0 @@
1
- $breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
2
-
3
- .mds-width-full {
4
- width: 100%;
5
- }
6
- .mds-width-auto {
7
- width: auto;
8
- }
9
-
10
- @each $bpname, $value in $breakpoints {
11
- @include mq($from: $bpname) {
12
- .mds-width-#{$bpname}-full {
13
- width: 100%;
14
- }
15
- .mds-width-#{$bpname}-auto {
16
- width: auto;
17
- }
18
- }
19
- }