mp-design-system 0.8.4 → 0.8.6

package/package.json

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

package/src/_includes/components/button/button.config.js

@@ -37,6 +37,12 @@ module.exports = {
       context: {
         colour: 'outline-white'
       }
+    },
+    {
+      title: 'Small',
+      context: {
+        classes: 'c-button--small'
+      }
     }
   ],
   props: [

package/src/_includes/components/button/button.scss

@@ -11,8 +11,7 @@
   font-family: $font-stack;
 }
 
-.mp.c-button,
-.c-button {
+%c-button {
   // Reset
   border-radius: 0;
   background: transparent;
@@ -45,6 +44,11 @@
     text-decoration: none;
     color: color("white");
   }
+}
+
+.mp.c-button,
+.c-button {
+  @extend %c-button;
 
   &--wide {
     width: 100%;

package/src/_includes/components/input/input.njk

@@ -1,9 +1,9 @@
 {% inputWrapper params.error %}
-  <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}{{ params.classes }}" for="{{ params.id }}">{{ params.label }}</label>
+  <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}" for="{{ params.id }}">{{ params.label }}</label>
   {% if params.button %}
   <div class="u-flex u-border">
   {% endif %}
-  <input type="{{ params.type or 'text' }}" class="c-input {{ 'c-input--with-button' if params.button }}" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} />
+  <input type="{{ params.type or 'text' }}" class="c-input {{ 'c-input--with-button' if params.button }}{{ params.classes }}" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} />
   {% if params.button %}
   <button type="button" class="mp c-button--white">Search</button>
   {% endif %}

package/src/_includes/components/input/input.scss

@@ -41,6 +41,19 @@
     min-height: 10rem;;
   }
 
+  &--file {
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+
+    @at-root ::-webkit-file-upload-button {
+      @extend %c-button;
+      @extend .c-button--blue;
+      display: inline-flex;
+      @include margin-right('xs');
+    }
+  }
+
   &-error {
     --error-state: #{color('red')};
     position: relative;

package/src/_includes/components/quote/quote.scss

@@ -1,21 +1,23 @@
 .c-quote {
     color: color('petrol', 'step-1');
     padding-top: 74px;
-    @include padding-top('2xl');
+    @include padding('2xl', 0, 'l', 'xl');
     position: relative;
 
     &:before {
       content: '“';
-      // color: color('petrol', 'step-2');
+      color: color('petrol', 'step-3');
       position: absolute;
       height: 57px;
       width: 45px;
       left: 0;
-      top: 0;
+      top: 0.1em;
+      font-family: "Arial", sans-serif;
       font-size: 10em;
       font-weight: 900;
       line-height: 0.9;
-      margin-left: -0.05em;
+      margin-left: -0.025em;
+      z-index: -1;
     }
 
     p {

package/src/_includes/components/tabs/tabs.scss

@@ -37,7 +37,7 @@
     overflow-x: auto;
     
     &-list {
-      border-bottom: 4px solid color('petrol', 'step-2');
+      border-bottom: 4px solid color('utility-blue', 'step-3');
       display: flex;
       width: 100%;
       min-width: min-content;
@@ -58,7 +58,7 @@
     @include padding(0, 0 , 's-m');
     @include margin-right('m');
     display: block;
-    border-bottom: 4px solid color('petrol', 'step-2');
+    border-bottom: 4px solid color('utility-blue', 'step-3');
     margin-bottom: -4px;
     position: relative;
     z-index: 1;

package/src/assets/scss/library.scss

@@ -244,12 +244,15 @@
     }
 
     iframe {
-      position: absolute;
       height: 100%;
       width: 100%;
       left: 0;
       top: 0;
       transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);
+
+      @media only screen and (min-width: 600px) {
+        position: absolute;
+      }
     }
   }
 

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

@@ -130,15 +130,15 @@
 
   @media (min-width: 35em) {
     &:not(.o-prose--left-blockquote) blockquote {
-      padding-left: 107px;
+      @include padding-left('3xl');
 
       &:before {
-        left: 107px;
+        left: var(--space-xl);
       }
     }
 
     &.o-prose--left-blockquote blockquote {
-      padding-right: 107px;
+      @include padding-right('3xl');
     }
   }
 

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

@@ -1,7 +1,3 @@
-html {
-  font-size:18px;
-}
-
 html body {
 
 @import './typography.scss';

package/src/components/installation.md

@@ -9,12 +9,12 @@ sidebar: components
 The simplest way to consume the design system is with a `<link>` & `<script>` tag. Unpkg is a CDN of the built CSS & JavaScript, and can be included like so:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/mp-design-system@{{ config.dsVersion }}/dist/build/scss/main.css" />
+<link rel="stylesheet" href="https://unpkg.com/mp-design-system@latest/dist/build/scss/main.css" />
 
-<script src="https://unpkg.com/mp-design-system@{{ config.dsVersion }}/dist/build/js/app.js"></script>
+<script src="https://unpkg.com/mp-design-system@latest/dist/build/js/app.js"></script>
 ```
 
-The latest version number is **V.{{ config.dsVersion }}**, and is visible in the top-right of the page throughout the design system.
+The latest version number is **V.{{ config.dsVersion }}**, and is visible in the top-right of the page throughout the design system. You can access previous versions by replacing "latest" in the URL, e.g. `https://unpkg.com/mp-design-system@0.8.2/dist/build/scss/main.css`
 
 ## Consuming the design system via NPM
 

package/src/patterns/form.njk

@@ -122,6 +122,14 @@ layout: patterns-page
                     type: 'number',
                     placeholder: 'Placeholder'
                 })}}
+
+                {{ input({
+                    label: 'File',
+                    name: 'file_input',
+                    id: 'file_input',
+                    type: 'file',
+                    classes: 'c-input--file'
+                })}}
                 
                 {{ input({
                     label: 'Range',