mp-design-system 1.2.54 → 1.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.54",
+  "version": "1.2.55",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

package/src/_includes/components/back-to-top/back-to-top.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  title: 'Back to top',
+  component: {
+    name: 'back-to-top',
+  },
+  context: {
+    text: 'Back to top',
+  },
+  variants: [],
+};

package/src/_includes/components/back-to-top/back-to-top.njk

@@ -0,0 +1,7 @@
+{%- from "components/icon/macro.njk" import icon -%}
+
+{%- set classNames = "mp c-back-to-top" -%}
+
+<a href="#header" class="{{ classNames }}" title="{{ params.text }}">
+  {{ icon({ id: 'chevron-up', class: 'c-back-to-top__icon' }) }}
+</a>

package/src/_includes/components/back-to-top/back-to-top.scss

@@ -0,0 +1,22 @@
+.c-back-to-top {
+  position: fixed;
+  background: color('blue');
+  color: color('white') !important;
+  height: 2.6rem;
+  width: 2.6rem;
+  right: var(--space-xs);
+  bottom: var(--space-xs);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4rem;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 20%);
+  transition: 300ms background-color, 300ms color;
+
+  &:where(:hover, :focus) {
+    background: color('blue', 'step--1');
+  }
+
+  &__icon {
+  }
+}

package/src/_includes/components/back-to-top/macro.njk

@@ -0,0 +1,5 @@
+{%- from "components/component/component.njk" import c -%}
+
+{%- macro backToTop(params) -%}
+  {{ c({ name: 'back-to-top' }, params) }}
+{%- endmacro -%}

package/src/_includes/components/footer/footer.njk

@@ -1,4 +1,5 @@
 {% from "components/icon/macro.njk" import icon %}
+{% from "components/back-to-top/macro.njk" import backToTop %}
 
 <footer class="mp c-footer" role="contentinfo">
   <nav class="c-footer__primary u-wrap" aria-label="Footer">
@@ -76,3 +77,5 @@
     </div>
   </div>
 </footer>
+
+{{ backToTop({}) }}

package/src/_includes/components/icon/icon.njk

@@ -1,3 +1,13 @@
-<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--{{ params.id }}">
+{%- set classNames = "mp c-icon c-icon" -%}
+
+{%- if params.id -%}
+  {% set classNames = classNames + " c-icon--" + params.id %}
+{% endif -%}
+
+{%- if params.class -%}
+  {% set classNames = classNames + " " + params.class %}
+{% endif -%}
+
+<svg role="img" aria-hidden="true" focusable="false" class="{{ classNames }}">
   <use xlink:href="/static/svg/sprite.svg#{{ params.id }}"></use>
 </svg>

package/src/assets/scss/components/index.scss

@@ -1,5 +1,6 @@
 @import '~comp/accordion/accordion.scss';
 @import '~comp/alert/alert.scss';
+@import '~comp/back-to-top/back-to-top.scss';
 @import '~comp/breadcrumb/breadcrumb.scss';
 @import '~comp/button/button.scss';
 @import '~comp/campaign/campaign.scss';

package/src/assets/scss/objects/prose.scss

@@ -2,15 +2,15 @@
   color: inherit;
 
   h2 {
-    @extend .c-h,.c-h--step-3;
+    @extend .c-h, .c-h--step-3;
   }
 
   h3 {
-    @extend .c-h,.c-h--step-2;
+    @extend .c-h, .c-h--step-2;
   }
 
   h4 {
-    @extend .c-h,.c-h--step-1;
+    @extend .c-h, .c-h--step-1;
   }
 
   p,
@@ -25,14 +25,15 @@
     color: color('utility-blue');
     text-decoration: underline;
     text-underline-offset: 3px;
-  
+
     &:hover {
       text-decoration: none;
     }
   }
 
   ul li {
-    list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;    
+    list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>')
+      outside;
     margin-left: 1em;
     padding-left: 0.5rem;
 
@@ -152,6 +153,10 @@
   table {
     @extend .c-table;
   }
+
+  video {
+    max-width: 100%;
+  }
 }
 
 .o-featured-image {

package/src/brand/typography.md

@@ -9,15 +9,15 @@ status: 'Ready'
 
 ## Inter
 
-Our brand font is [Inter](https://rsms.me/inter). This typeface has been selected for its;
+Our brand font is **Inter**. This typeface has been selected for its;
 - Excellent clarity and legibility
 - Extensive character set
 - Comprehensive weight and style options
 - Understated authority
 
-Find more information about Inter at [https://rsms.me/inter](https://rsms.me/inter)
+**We use Inter version 3**. Inter recently received a new v4 update, which changes the spacing and overall look of the font. To maintain consistent branding for Malvern Panalytical materials, we recommend avoiding any version later than v3.19.
 
-{% button 'Download Inter font' 'https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip' %}
+{% button 'Download Inter font (v3.19)' 'https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip' %}
 
 Inter is also available from [Google Fonts](https://fonts.google.com/specimen/Inter).