mp-design-system 0.6.1 → 0.7.2

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 (36) hide show
  1. package/dist/build/js/app.js +6 -4
  2. package/dist/build/js/app.js.map +1 -1
  3. package/dist/build/scss/library.css +1 -1
  4. package/dist/build/scss/library.css.map +1 -1
  5. package/dist/build/scss/main.css +1 -1
  6. package/dist/build/scss/main.css.map +1 -1
  7. package/package.json +1 -1
  8. package/src/_includes/components/campaign/campaign.config.js +3 -3
  9. package/src/_includes/components/campaign/campaign.scss +5 -1
  10. package/src/_includes/components/card/card.config.js +20 -0
  11. package/src/_includes/components/card/card.scss +11 -7
  12. package/src/_includes/components/comparison-table/comparison-table.scss +5 -0
  13. package/src/_includes/components/header/header.scss +1 -1
  14. package/src/_includes/components/product-signpost/product-signpost.njk +11 -9
  15. package/src/_includes/components/scroll-spy/scroll-spy.scss +4 -0
  16. package/src/_includes/components/table/table.scss +4 -0
  17. package/src/_includes/components/usp/usp.scss +2 -7
  18. package/src/_includes/includes/related-events.njk +1 -1
  19. package/src/_includes/includes/resources.njk +1 -1
  20. package/src/_includes/includes/system-header.njk +1 -1
  21. package/src/_includes/layout.njk +28 -4
  22. package/src/assets/js/app.js +2 -0
  23. package/src/assets/js/imports/scrollbar-width.js +15 -0
  24. package/src/assets/js/imports/utilities.js +10 -0
  25. package/src/assets/scss/components/gallery.scss +16 -18
  26. package/src/assets/scss/library.scss +6 -2
  27. package/src/assets/scss/tools/breakout.scss +2 -0
  28. package/src/assets/scss/tools/index.scss +2 -0
  29. package/src/assets/scss/utilities/hr.scss +4 -0
  30. package/src/components/css.md +3 -2
  31. package/src/components/utilities.md +122 -0
  32. package/src/patterns/grid-of-cards.njk +57 -21
  33. package/src/prototype/card-test.njk +147 -0
  34. package/src/prototype/index.njk +1 -1
  35. package/src/static/svg/logo-small.svg +1 -0
  36. package/src/static/svg/logo.svg +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mp-design-system",
3
- "version": "0.6.1",
3
+ "version": "0.7.2",
4
4
  "description": "",
5
5
  "main": "app.js",
6
6
  "scripts": {
@@ -24,19 +24,19 @@ module.exports = {
24
24
  {
25
25
  title: 'Petrol',
26
26
  context: {
27
- classes: 'c-campaign__petrol'
27
+ classes: 'c-campaign--petrol'
28
28
  }
29
29
  },
30
30
  {
31
31
  title: 'Blue',
32
32
  context: {
33
- classes: 'c-campaign__blue'
33
+ classes: 'c-campaign--blue'
34
34
  }
35
35
  },
36
36
  {
37
37
  title: 'Orange',
38
38
  context: {
39
- classes: 'c-campaign__orange'
39
+ classes: 'c-campaign--orange'
40
40
  }
41
41
  }
42
42
  ],
@@ -22,6 +22,10 @@
22
22
 
23
23
  &__image {
24
24
  z-index: 0;
25
+
26
+ img {
27
+ width: 100%;
28
+ }
25
29
  }
26
30
 
27
31
  &.mp .u-link {
@@ -64,7 +68,7 @@
64
68
  }
65
69
  }
66
70
 
67
- @media (min-width:50em) {
71
+ @media (min-width:35em) {
68
72
  display: flex;
69
73
 
70
74
  &--switch &__content {
@@ -711,6 +711,26 @@ module.exports = {
711
711
  ]
712
712
  }
713
713
  }
714
+ },
715
+ {
716
+ title: 'Product card - single',
717
+ preview: 'cards-three',
718
+ context: {
719
+ theme: {
720
+ layout: 'single',
721
+ border: true
722
+ },
723
+ image: {
724
+ src: '/static/img/blog-page-image-1.jpg',
725
+ alt: 'Product image alt'
726
+ },
727
+ header: {
728
+ title: '凝胶渗透色谱仪OMNISEC系统'
729
+ },
730
+ body: {
731
+ content: '<p>确定聚合物材料的分子量、粒度和结构</p>'
732
+ }
733
+ }
714
734
  }
715
735
  ],
716
736
 
@@ -62,14 +62,13 @@
62
62
  &__primary {
63
63
  display: flex;
64
64
  flex-direction: column;
65
+ }
65
66
 
66
- & > * {
67
- // Required for IE
68
- flex-grow: 0;
69
- flex-shrink: 0;
70
- flex-basis: auto;
71
- width: 100%;
72
- }
67
+ &--layout-multi .c-card__wrapper,
68
+ &__primary {
69
+ // Required for IE
70
+ flex-shrink: 0;
71
+ width: 100%;
73
72
  }
74
73
 
75
74
  &--layout-multi {
@@ -193,6 +192,7 @@
193
192
  &--layout-multi &__wrapper {
194
193
  @include padding("s-m");
195
194
  width: 100%;
195
+ justify-content: space-between;
196
196
  }
197
197
 
198
198
  &--layout-single.c-card--has-tag:not(.c-card--has-image) &__primary {
@@ -418,3 +418,7 @@
418
418
  @include gap("s-l");
419
419
  }
420
420
  }
421
+
422
+ // IE11 fix
423
+ // This forces IE11 to use display:block instead of flex for single-column cards
424
+ _:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper { display:block; }
@@ -52,6 +52,11 @@
52
52
  }
53
53
  }
54
54
 
55
+ thead img {
56
+ @include space('max-height', '3xl');
57
+ object-fit: contain;
58
+ }
59
+
55
60
  }
56
61
 
57
62
  @media only screen and (min-width: 640px) {
@@ -223,7 +223,7 @@
223
223
  }
224
224
  }
225
225
 
226
- @media (min-width: 1410px) {
226
+ @media (min-width: 1500px) {
227
227
  &__site:after {
228
228
  clip-path: polygon(0% 101%, 78px 0%, 100% 0%, 100% 101%, 78px 101%);
229
229
  }
@@ -1,14 +1,16 @@
1
1
  <article class="mp c-product-signpost {{ params.classes }}">
2
2
  <a class="c-product-signpost__link" href="{{ params.link }}">{{ params.title }}</a>
3
- {% if params.image.src %}
4
- <figure class="c-product-signpost__image">
5
- <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
6
- </figure>
7
- {% endif %}
8
- <div class="u-flow--3xs">
9
- <h2 class="c-h c-h--step-0">{{ params.title }}</h2>
10
- <div class="o-prose">
11
- {{ params.description | safe }}
3
+ <div class="c-product-signpost__wrapper">
4
+ {% if params.image.src %}
5
+ <figure class="c-product-signpost__image">
6
+ <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
7
+ </figure>
8
+ {% endif %}
9
+ <div class="u-flow--3xs">
10
+ <h2 class="c-h c-h--step-0">{{ params.title }}</h2>
11
+ <div class="o-prose">
12
+ {{ params.description | safe }}
13
+ </div>
12
14
  </div>
13
15
  </div>
14
16
  </article>
@@ -9,6 +9,10 @@
9
9
  display: block;
10
10
  transition: 300ms transform;
11
11
 
12
+ &:hover {
13
+ color: color("grey");
14
+ }
15
+
12
16
  &::before {
13
17
  content: "▸ ";
14
18
  position: absolute;
@@ -77,6 +77,10 @@
77
77
  color: inherit;
78
78
  font-weight: weight();
79
79
  }
80
+
81
+ tbody td:nth-child(n+2) {
82
+ text-align: center;
83
+ }
80
84
  }
81
85
 
82
86
  @media (min-width: 30em) {
@@ -2,9 +2,7 @@
2
2
  @include padding('s-m');
3
3
  border: 1px solid;
4
4
  border-image-slice: 1;
5
- border-image-source: linear-gradient( to right,
6
- rgba(color('blue'), 0.5),
7
- rgba(color('green'), 0.5));
5
+ border-image-source: linear-gradient(to right, rgba(color('blue'),0.5), rgba(color('green'),0.5));
8
6
  position: relative;
9
7
 
10
8
  &__title {
@@ -12,10 +10,7 @@
12
10
  color: color('petrol');
13
11
 
14
12
  @supports(-webkit-text-fill-color:transparent) {
15
- background-image: -webkit-gradient(linear,
16
- 0% 0%,100% 100%,
17
- from(color('petrol')),
18
- to(color('blue')));
13
+ background-image: linear-gradient(to right, color('petrol'), color('blue') );
19
14
  -webkit-background-clip: text;
20
15
  -webkit-text-fill-color: transparent;
21
16
  display: inline-block;
@@ -3,7 +3,7 @@
3
3
  <aside class="c-slat c-slat--grey c-slat--padded">
4
4
  <div class="u-wrap u-flow">
5
5
  <h3 class="c-h c-h--upper">Related events</h3>
6
- <div class="o-grid o-grid--of-three">
6
+ <div class="o-grid o-grid--of-three o-grid--swipeable">
7
7
  {{ card({
8
8
  theme: {
9
9
  layout: 'single',
@@ -3,7 +3,7 @@
3
3
  <aside class="mp c-slat c-slat--grey c-slat--padded">
4
4
  <div class="u-wrap u-flow--xl">
5
5
  <h2 class="c-h c-h--step-3">Related resources</h2>
6
- <div class="o-grid o-grid--of-three">
6
+ <div class="o-grid o-grid--of-three o-grid--swipeable">
7
7
  {{ card({
8
8
  theme: {
9
9
  layout: 'single',
@@ -2,7 +2,7 @@
2
2
 
3
3
  <header class="c-library__header u-split">
4
4
  <a class="c-library__logo" href="/">
5
- <img src="/static/svg/logo.svg" alt="Home" />
5
+ <img src="/static/svg/logo-small.svg" alt="Home" />
6
6
  <span class="c-library__logo-name">
7
7
  {% for item in config.logo %}
8
8
  <span>{{ item }}</span>
@@ -14,10 +14,31 @@
14
14
  <meta property="og:image:alt" content="{{ config.name }}" />
15
15
  <meta name="twitter:image" content="{{ config.openGraphImage }}" />
16
16
  <link rel="preconnect" href="https://fonts.gstatic.com">
17
- <script>if(document.documentElement){
18
- document.documentElement.classList.add('has-js');
19
- document.documentElement.classList.remove('no-js');
20
- }</script>
17
+ <script>
18
+ if(document.documentElement){
19
+ document.documentElement.classList.add('has-js');
20
+ document.documentElement.classList.remove('no-js');
21
+ }
22
+ // Calculate the height of the sidebar so it doesn't cause double scrollbars
23
+ function debounce(func, wait, immediate) {
24
+ var timeout;
25
+ return function() {
26
+ var context = this, args = arguments;
27
+ var later = function() {
28
+ timeout = null;
29
+ if (!immediate) func.apply(context, args);
30
+ };
31
+ var callNow = immediate && !timeout;
32
+ clearTimeout(timeout);
33
+ timeout = setTimeout(later, wait);
34
+ if (callNow) func.apply(context, args);
35
+ };
36
+ };
37
+ var resizeSidebar = debounce(function() {
38
+ var headerHeight = document.querySelector('.c-library__header').offsetHeight + 'px';
39
+ document.documentElement.style.setProperty('--headerHeight', headerHeight)
40
+ }, 250);
41
+ </script>
21
42
  <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
22
43
  <link rel="stylesheet" href="/build/scss/main.css" />
23
44
  <script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>
@@ -30,12 +51,15 @@
30
51
  <script src="/build/js/app.js"></script>
31
52
  <script>
32
53
  (function() {
54
+ // Prevent empty links from jumping to the top of page when clicked
33
55
  var links = document.querySelectorAll('a[href=""],a[href="#"]');
34
56
  for(var i = 0; links.length > i; i++) {
35
57
  links[i].addEventListener('click', function(event) {
36
58
  event.preventDefault();
37
59
  })
38
60
  }
61
+ window.addEventListener('resize', resizeSidebar);
62
+ resizeSidebar();
39
63
  })();
40
64
  </script>
41
65
  </body>
@@ -5,6 +5,7 @@ import Gallery from './imports/gallery';
5
5
  import HeroPattern from './imports/hero-pattern';
6
6
  import ResponsiveTable from './imports/responsive-table';
7
7
  import ScrollSpy from './imports/scroll-spy';
8
+ import ScrollbarWidth from './imports/scrollbar-width';
8
9
  import Tabs from './imports/tabs';
9
10
 
10
11
  (() => {
@@ -23,4 +24,5 @@ import Tabs from './imports/tabs';
23
24
  Tabs();
24
25
  ScrollSpy();
25
26
  ResponsiveTable();
27
+ ScrollbarWidth();
26
28
  })();
@@ -0,0 +1,15 @@
1
+ import { debounce } from './utilities';
2
+
3
+ function ScrollbarWidth() {
4
+ setScrollbarWidth();
5
+ window.addEventListener('resize', debounce(setScrollbarWidth, 250));
6
+ }
7
+
8
+ function setScrollbarWidth() {
9
+ document.documentElement.style.setProperty(
10
+ '--scrollbarWidth',
11
+ window.innerWidth - document.body.clientWidth + 'px'
12
+ );
13
+ }
14
+
15
+ export default ScrollbarWidth;
@@ -15,6 +15,16 @@ export function userPrefersReducedMotion() {
15
15
  return prefersReducedMotion;
16
16
  }
17
17
 
18
+ export const debounce = (func, limit) => {
19
+ let wait = false;
20
+ return () => {
21
+ if (wait) return;
22
+ func();
23
+ wait = true;
24
+ setTimeout(() => wait = false, limit);
25
+ }
26
+ }
27
+
18
28
  export const lerp = (x, y, a) => x * (1 - a) + y * a;
19
29
  export const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));
20
30
  export const invlerp = (x, y, a) => clamp((a - x) / (y - x));
@@ -10,8 +10,13 @@
10
10
  width: 100%;
11
11
 
12
12
  img {
13
- margin: 0 auto;
14
13
  display: block;
14
+ margin: 0 auto;
15
+
16
+ @supports (object-fit:contain) {
17
+ max-height: 500px;
18
+ object-fit: contain;
19
+ }
15
20
  }
16
21
 
17
22
  &:not(.active) {
@@ -24,29 +29,22 @@
24
29
  @include padding-bottom('s');
25
30
  display: flex;
26
31
  flex-direction: row;
27
- flex-wrap: nowrap;
28
- -webkit-overflow-scrolling: touch;
29
- scroll-behavior: smooth;
30
- scroll-snap-type: x mandatory;
31
- overflow-x: auto;
32
+ flex-wrap: wrap;
33
+ gap: 2%;
34
+ gap: max(8px, 2%);
32
35
 
33
36
  & > * {
34
37
  background: color('grey', 'step-3');
35
- max-width: 25%;
36
- max-height: var(--space-2xl);
37
- min-width: var(--space-l);
38
- min-height: var(--space-l);
39
- width: auto;
40
- scroll-snap-align: start;
41
-
42
- & + * {
43
- margin-left: var(--space-xs-s);
44
- }
38
+ @include space('min-height', 'l');
39
+ @include space('max-height', '2xl');
40
+ @include space('min-width', 'l');
41
+ max-width: 10.75%;
45
42
 
46
43
  img {
47
- min-height: 100%;
48
- opacity: 0.9;
44
+ height: 100%;
45
+ opacity: 0.8;
49
46
  object-fit: cover;
47
+ width: 100%;
50
48
  }
51
49
 
52
50
  &.active img {
@@ -71,7 +71,7 @@
71
71
  @media only screen and (min-width: 600px) {
72
72
  &--components &__body > * {
73
73
  overflow-y: scroll;
74
- height: calc(100vh - 115px);
74
+ height: calc( 100vh - var(--headerHeight) - 1px );
75
75
  }
76
76
  }
77
77
 
@@ -212,7 +212,11 @@
212
212
  }
213
213
 
214
214
  &__main {
215
- overflow-y: scroll;
215
+ overflow-y: auto;
216
+
217
+ @media only screen and (min-width: 600px) {
218
+ overflow-y: scroll;
219
+ }
216
220
  }
217
221
 
218
222
  &__frame {
@@ -3,9 +3,11 @@
3
3
 
4
4
  @mixin breakout($pad: 0) {
5
5
  left: 50%;
6
+ left: calc( 50% + var(--scrollbarWidth)/2.0001 );
6
7
  position: relative;
7
8
  transform: translateX(-50vw);
8
9
  width: 100vw;
10
+ width: calc( 100vw - var(--scrollbarWidth) );
9
11
  padding-left: safe-space($pad);
10
12
  padding-right: safe-space($pad);
11
13
  }
@@ -137,6 +137,7 @@
137
137
 
138
138
  @mixin hyphenated {
139
139
  @media only screen and (max-width: 28rem) {
140
+ word-break: break-word;
140
141
  -webkit-hyphens: auto;
141
142
  -ms-hyphens: auto;
142
143
  hyphens: auto;
@@ -144,6 +145,7 @@
144
145
 
145
146
  @media only screen and (max-width: 70rem) {
146
147
  [lang='de-DE'] & {
148
+ word-break: break-word;
147
149
  -webkit-hyphens: auto;
148
150
  -ms-hyphens: auto;
149
151
  hyphens: auto;
@@ -12,4 +12,8 @@
12
12
 
13
13
  .u-border {
14
14
  border: 1px solid color('petrol', 'step-2');
15
+ }
16
+
17
+ .o-prose hr {
18
+ @extend .u-hr
15
19
  }
@@ -31,8 +31,7 @@ Most of the CSS lives in this group. Each component is an encapsulated 'block' (
31
31
  Utilities are classes that do one thing really well. For example: `.u-hidden` hides elements on the page in a non destructive way (still visible to screenreaders). There are auto-generated spacing, typography and colour classes to help compose a page (and prototype new components before refactoring them into the above groups). The `u-` prefix is used for utilities.
32
32
 
33
33
  ## BEM
34
-
35
- BEM is used as a naming methodology, with `__` used for elements, and `--` used for modifiers.
34
+ We use BEM as a naming methodology, with `__` used for elements, and `--` used for modifiers.
36
35
 
37
36
  ```scss
38
37
  /* Pattern */
@@ -57,6 +56,8 @@ BEM is used as a naming methodology, with `__` used for elements, and `--` used
57
56
  }
58
57
  ```
59
58
 
59
+ For more information about BEM see [getbem.com](http://getbem.com/)
60
+
60
61
  ### SCSS variables vs. CSS custom properties
61
62
 
62
63
  {{ config.name }} is designed to support IE11+, which leaves a large support gap for custom properties—sadly, polyfilling is patchy at best. For this reason, the design system relies more on SCSS variables than custom properties.
@@ -0,0 +1,122 @@
1
+ ---
2
+ title: Utilities
3
+ layout: content-page
4
+ sidebar: components
5
+ ---
6
+
7
+ These utility classes each do a single, simple job. They can be applied to any HTML element, and are designed to be used in a wide variety of contexts, when creating a new component or variant might not be required.
8
+
9
+ ## Typography
10
+
11
+ More typography utility classes are documented on the [typography page](/components/typography).
12
+
13
+ ```html
14
+ <div class="u-strong">Bold text</div>
15
+ ```
16
+
17
+ ```html
18
+ <div class="u-normal">Regular-weight (non-bold) text</div>
19
+ ```
20
+
21
+ ```html
22
+ <div class="u-text-center">Center-aligned text</div>
23
+ ```
24
+
25
+ ```html
26
+ <div class="u-ls">Standard letter-spacing (-0.01em)</div>
27
+ ```
28
+
29
+ ## Display
30
+
31
+ ```html
32
+ <div class="u-hidden">Visually hidden, but still accessible to screenreaders</div>
33
+ ```
34
+
35
+ ```html
36
+ <div class="u-display-none">Entirely hidden</div>
37
+ ```
38
+
39
+ ```html
40
+ <div class="u-display-block">Block-level layout</div>
41
+ ```
42
+
43
+ ```html
44
+ <div class="u-display-inline-block">Inline-block-level layout</div>
45
+ ```
46
+
47
+ ```html
48
+ <div class="u-revealed">The opposite of u-hidden, useful for e.g. accordions</div>
49
+ ```
50
+
51
+ ## Layout
52
+
53
+ ```html
54
+ <div class="u-float-right">Floated right</div>
55
+ ```
56
+
57
+ ```html
58
+ <div class="u-clear-both">Cleared from floats</div>
59
+ ```
60
+
61
+ ```html
62
+ <div class="u-relative">Relative positioning</div>
63
+ ```
64
+
65
+ ```html
66
+ <p class="u-sticky">This will "stick" to the top of the screen while scrolling</p>
67
+ ```
68
+
69
+ ```html
70
+ <div class="u-sticky--gutter">Sticky positioning, with a gap above</div>
71
+ ```
72
+
73
+ ```html
74
+ <div class="u-split">
75
+ <p>Split: aligned left</p>
76
+ <a class="u-link">Aligned right</a>
77
+ </div>
78
+ The two child items will be aligned in a horizontal row
79
+ ```
80
+ <div class="u-split u-pad-s u-border">
81
+ <p>Split: aligned left</p>
82
+ <a class="u-link">Aligned right</a>
83
+ </div>
84
+
85
+ ## Padding and margins
86
+
87
+ More padding and margin utility classes are documented on the [space page](/components/space).
88
+
89
+ #### Syntax:
90
+ `u`-`(pad or margin)`-`(optional direction)`-`(size)`-`(optional flex size)`
91
+
92
+ Sizes | Directions
93
+ ------|-----------
94
+ 3xs | top
95
+ 2xs | bottom
96
+ xs | left
97
+ s | right
98
+ m | y
99
+ l | x
100
+ xl |
101
+ 2xl |
102
+ 3xl |
103
+ 4xl |
104
+
105
+ N.B. Not all permutations are available in the existing CSS, as that would amount to over 4800 extra lines of code. Currently we've only implemented a handful - but we can add more as needed.
106
+
107
+ ```html
108
+ <div class="u-pad-s">Small padding on all sides</div>
109
+ ```
110
+
111
+ ```html
112
+ <div class="u-margin-y-xl">Extra large margin on top and bottom</div>
113
+ ```
114
+
115
+ ```html
116
+ <div class="u-margin-left-m">Medium margin on left side only</div>
117
+ ```
118
+
119
+ ```html
120
+ <div class="u-pad-x-s-xl">Flexible (small to XL) padding on left and right</div>
121
+ Grows from small padding on small screens, to xl padding on large screens
122
+ ```