mp-design-system 1.2.54 → 1.2.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.54",
+  "version": "1.2.56",
   "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/eyebrow/eyebrow.config.js

@@ -71,6 +71,14 @@ module.exports = {
                 text: 'Product range',
                 colour: 'utility-orange'
             }
+        },
+        {
+            title: 'White',
+            context: {
+                text: 'Store',
+                colour: 'white',
+                icon: 'shopping-cart'
+            }
         }
     ]
 }

package/src/_includes/components/eyebrow/eyebrow.scss

@@ -1,13 +1,13 @@
 .c-eyebrow {
   background-color: color('green');
-  color: color('white');  
+  color: color('white');
   @include padding('3xs', 'xs');
   border: 1px solid color('green');
   border-radius: 2em;
   display: inline-flex;
   align-items: center;
   @include step(-1);
-  letter-spacing: -.01em;
+  letter-spacing: -0.01em;
   text-wrap: nowrap;
 
   &--blue {
@@ -52,6 +52,12 @@
     color: color('grey');
     border-color: color('utility-orange', 'step-1');
   }
+
+  &--white {
+    background-color: color('white');
+    color: color('petrol');
+    border-color: color('petrol');
+  }
 }
 
 button.c-eyebrow {
@@ -62,4 +68,4 @@ button.c-eyebrow {
   svg {
     @include margin-left('2xs');
   }
-}
+}

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).
 

package/src/components/iconography.njk

@@ -36,6 +36,7 @@ Icons add visual noise to designs and should be used sparingly.
   'play',
   'rss',
   'search',
+  'shopping-cart',
   'tick',
   'twitter',
   'warning',

package/src/static/svg/sprite.svg

@@ -26,7 +26,7 @@
 
   <symbol id="log-out" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9M16 17L21 12M21 12L16 7M21 12H9"/></symbol>
 
-  <symbol id="monitor" viewBox="0 0 24 24" fill="none"><path d="M18.6 4.23438H5.4C4.6268 4.23438 4 4.86118 4 5.63438V12.6344C4 13.4076 4.6268 14.0344 5.4 14.0344H18.6C19.3732 14.0344 20 13.4076 20 12.6344V5.63438C20 4.86118 19.3732 4.23438 18.6 4.23438Z" stroke="#3D7B87" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.2002 17.7695H15.8002" stroke="#3D7B87" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 14.9688V17.7687" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+  <symbol id="monitor" viewBox="0 0 24 24" fill="none"><path d="M18.6 4.23438H5.4C4.6268 4.23438 4 4.86118 4 5.63438V12.6344C4 13.4076 4.6268 14.0344 5.4 14.0344H18.6C19.3732 14.0344 20 13.4076 20 12.6344V5.63438C20 4.86118 19.3732 4.23438 18.6 4.23438Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.2002 17.7695H15.8002" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 14.9688V17.7687" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 
   <symbol id="pin" viewBox="0 0 24 24" fill="none"><g style="mix-blend-mode:multiply"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.75 9.51163C19.75 10.9541 19.2189 12.2724 18.3415 13.2818C17.1715 14.746 15.0292 17.7626 14.3076 20.0155C14.2778 20.1086 14.2154 20.1722 14.1409 20.2064C14.0983 20.2275 14.0504 20.2393 13.9996 20.2393C13.8503 20.2393 13.7249 20.1367 13.6902 19.9981C12.9741 17.7811 10.8951 14.8329 9.71784 13.3491C8.80514 12.3313 8.25 10.9863 8.25 9.51163C8.25 6.33599 10.8244 3.76163 14 3.76163C17.1756 3.76163 19.75 6.33599 19.75 9.51163ZM14 11.414C15.1046 11.414 16 10.5185 16 9.41397C16 8.3094 15.1046 7.41397 14 7.41397C12.8954 7.41397 12 8.3094 12 9.41397C12 10.5185 12.8954 11.414 14 11.414Z" fill="currentColor"/></g></symbol>
   
@@ -36,6 +36,8 @@
 
   <symbol id="search" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 22l-4.5-4.5M20 11a9 9 0 11-18 0 9 9 0 0118 0z"/></symbol>
 
+  <symbol id="shopping-cart" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 22.5c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1Zm11 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1ZM1 1.5h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72c.47 0 .93-.15 1.29-.44.37-.29.62-.71.71-1.17L23 6.5H6"/></symbol>
+
   <symbol id="tick" viewBox="0 0 24 24" fill="none"><path d="M4 12.3529L9.64706 18L21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 
   <symbol id="twitter" viewBox="0 0 24 24" fill="currentColor"><path d="M7.54752 21.5012C16.6042 21.5012 21.5578 13.9979 21.5578 7.49101C21.5578 7.27789 21.5578 7.06573 21.5434 6.85453C22.507 6.15748 23.3389 5.29441 24 4.30573C23.1013 4.70394 22.148 4.96508 21.1718 5.08045C22.1998 4.46507 22.9691 3.49719 23.3366 2.35693C22.3701 2.93049 21.3126 3.3347 20.2099 3.55213C19.4675 2.76271 18.4856 2.23997 17.4162 2.06481C16.3468 1.88966 15.2494 2.07184 14.294 2.58318C13.3385 3.09452 12.5782 3.9065 12.1307 4.89348C11.6833 5.88045 11.5735 6.98739 11.8186 8.04301C9.86088 7.94486 7.94572 7.43613 6.19741 6.54981C4.4491 5.6635 2.90672 4.41943 1.6704 2.89837C1.04073 3.98236 0.847872 5.2656 1.1311 6.48679C1.41433 7.70798 2.15234 8.77532 3.19488 9.47149C2.41127 9.44826 1.64475 9.23688 0.96 8.85517C0.96 8.87533 0.96 8.89645 0.96 8.91757C0.960311 10.0544 1.35385 11.1562 2.07387 12.0359C2.79389 12.9157 3.79606 13.5193 4.9104 13.7444C4.18547 13.9421 3.42488 13.9711 2.68704 13.8289C3.00169 14.8073 3.61427 15.6629 4.43911 16.276C5.26395 16.8892 6.25979 17.2291 7.28736 17.2484C5.54375 18.6188 3.38982 19.3627 1.17216 19.3604C0.780387 19.3597 0.388996 19.336 0 19.2894C2.25181 20.7345 4.87192 21.501 7.54752 21.4974"/></symbol>