mp-design-system 0.6.3 → 0.7.5

package/src/assets/scss/objects/grid.scss

@@ -26,7 +26,6 @@ $grid-gutter-width: 36;
   display: flex;
   flex-wrap: wrap;
   justify-content: stretch;
-  align-items: flex-start;
   margin-bottom: calc(-1 * #{space-unit()});
   margin-bottom: calc(-1 * var(--gutter));
   width: 100%;

package/src/assets/scss/tools/breakout.scss

@@ -3,9 +3,11 @@
 
 @mixin breakout($pad: 0) {
     left: 50%;
+    left: calc( 50% + var(--scrollbarWidth)/2.0001 );
     position: relative;
     transform: translateX(-50vw);
     width: 100vw;
+    width: calc( 100vw - var(--scrollbarWidth) );
     padding-left: safe-space($pad);
     padding-right: safe-space($pad);
 }

package/src/assets/scss/utilities/display.scss

@@ -109,10 +109,12 @@
   @include gap("s-l");
 }
 
-.u-16\/9 {
-  height: 0;
-  padding-bottom: 56.25%;
-  position: relative;
+@supports (object-fit: cover) {
+  .u-2\/1 {
+    aspect-ratio: 2 / 1;
+    object-fit: cover;
+    object-position: 75% 50%;
+  }
 }
 
 @media (min-width: 640px) {

package/src/assets/scss/utilities/hr.scss

@@ -12,4 +12,8 @@
 
 .u-border {
   border: 1px solid color('petrol', 'step-2');
+}
+
+.o-prose hr {
+  @extend .u-hr
 }

package/src/assets/scss/utilities/index.scss

@@ -1,3 +1,5 @@
+html body {
+
 @import './typography.scss';
 @import './link.scss';
 @import './colour.scss';
@@ -9,3 +11,5 @@
 @import './hr.scss';
 @import './ellipsis.scss';
 @import './scroll-shadows.scss';
+
+}

package/src/components/utilities.md

@@ -63,17 +63,60 @@ More typography utility classes are documented on the [typography page](/compone
 ```
 
 ```html
-<div class="u-sticky">Sticky positioning at the top of the viewport</div>
+<p class="u-sticky">This will "stick" to the top of the screen while scrolling</p>
 ```
 
 ```html
-<div class="u-sticky--gutter">Sticky positioning with gutter spacing</div>
+<div class="u-sticky--gutter">Sticky positioning, with a gap above</div>
 ```
 
 ```html
 <div class="u-split">
-    <h2>Webinars and events</h2>
-    <a href>View all</a>
+    <p>Split: aligned left</p>
+    <a class="u-link">Aligned right</a>
 </div>
 The two child items will be aligned in a horizontal row
+```
+<div class="u-split u-pad-s u-border">
+    <p>Split: aligned left</p>
+    <a class="u-link">Aligned right</a>
+</div>
+
+## Padding and margins
+
+More padding and margin utility classes are documented on the [space page](/components/space).
+
+#### Syntax: 
+`u`-`(pad or margin)`-`(optional direction)`-`(size)`-`(optional flex size)`
+
+Sizes | Directions
+------|-----------
+3xs | top
+2xs | bottom
+xs | left
+s | right
+m | y
+l | x
+xl | 
+2xl | 
+3xl | 
+4xl | 
+
+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.
+
+```html
+<div class="u-pad-s">Small padding on all sides</div>
+```
+
+```html
+<div class="u-margin-y-xl">Extra large margin on top and bottom</div>
+```
+
+```html
+<div class="u-margin-left-m">Medium margin on left side only</div>
+```
+
+```html
+<div class="u-pad-x-s-xl">Flexible (small to XL) padding on left and right</div>
+Grows from small padding on small screens, to xl padding on large screens
 ```

package/src/patterns/grid-of-cards.njk

@@ -6,25 +6,61 @@ layout: patterns-page
 {% from "components/card/macro.njk" import card %}
 
 <div class="o-grid o-grid--of-three o-grid--swipeable">
-  {% for _ in [0, 1, 2] %}
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        name: 'alt'
-      },
-      image: {
-        src: '/static/img/blog-page-image-1.jpg',
-        alt: ''
-      },
-      header: {
-        title: 'Mixing it with the Mastersizer!'
-      },
-      body: {
-        content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
-      },
-      link: '/prototype/blog-post',
-      tag: 'News'
-    }) }}
-  {% endfor %}
+  {{ card({
+    theme: {
+      layout: 'single',
+      size: 'medium',
+      name: 'alt'
+    },
+    image: {
+      src: '/static/img/blog-page-image-1.jpg',
+      alt: ''
+    },
+    header: {
+      title: 'Mixing it with the Mastersizer!'
+    },
+    body: {
+      content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
+    },
+    link: '/prototype/blog-post',
+    tag: 'News'
+  }) }}
+  {{ card({
+    theme: {
+      layout: 'single',
+      size: 'medium',
+      name: 'alt'
+    },
+    image: {
+      src: '/static/img/blog-page-image-1.jpg',
+      alt: ''
+    },
+    header: {
+      title: 'GPC/SEC standards: making them last'
+    },
+    body: {
+      content: '<p>Earlier this year I highlighted the different types of GPC/SEC standards available and where to find them on our eStore. In this post, I’m going to share some tips and tricks about preparing your standards and making them last. But first, what standard should you be using? In my previous post, I discussed how the […]</p>'
+    },
+    link: '/prototype/blog-post',
+    tag: 'News'
+  }) }}
+  {{ card({
+    theme: {
+      layout: 'single',
+      size: 'medium',
+      name: 'alt'
+    },
+    image: {
+      src: '/static/img/blog-page-image-1.jpg',
+      alt: ''
+    },
+    header: {
+      title: 'Viral Vector Vaccines: A Borrowed Technology from Gene Therapy Advancements'
+    },
+    body: {
+      content: '<p>Advances in recombinant DNA technology, genomics, and immunology have greatly influenced the vaccine development process. The genetic manipulation of viruses makes them suitable as vectors for gene delivery, providing a novel and unique opportunity for vaccine design. Viruses survive and replicate by invading their host’s cells and hijacking their protein-making machinery. These virus particles contain […]</p>'
+    },
+    link: '/prototype/blog-post',
+    tag: 'News'
+  }) }}
 </div>

package/src/prototype/index.njk

@@ -445,7 +445,7 @@ tags: prototype
           </div>
 
           <div id="tab-events" class="c-tab">
-            <div class="o-grid o-grid--of-three">
+            <div class="o-grid o-grid--of-three o-grid--swipeable">
               {{ card({
                 theme: {
                   layout: 'single',