mp-design-system 1.2.64 → 1.2.66

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

@@ -1,28 +0,0 @@
-module.exports = {
-    title: 'Accordion',
-    component: {
-        name: 'accordion'
-    },
-    figma: 'https://www.figma.com/file/szD8e7jNeWIfKpt6y41isi/Franklin-design-system?type=design&node-id=6879%3A3616&mode=design&t=vh7UGUcY3zjfbgUR-1',
-    docs: true,
-    context: {
-        items: [
-            {
-                title: 'Do I need to prepare the workspace prior to installation?',
-                content: 'All instruments need a power source, and some have additional requirements such as a water supply or waste extraction. Where this the case, we will advise you prior to shipping your instrument.'
-            },
-            {
-                title: 'What specialist skills or knowledge are required?',
-                content: 'You don\'t need any specialist skills or knowledge to perform a Smart Install. Simply follow the instructions provided.'
-            },
-            {
-                title: 'Do I need specialist tools or equipment to Smart Install a new instrument?',
-                content: '<ul><li>For installation of a Mastersizer or Zetasizer system, you will need a computer with internet access in order to view the installation guides. For installation of an Epsilon 1 XRF instrument, you will also need a smartphone or tablet to connect with our support personnel via a secure, augmented reality (AR) platform.</li><li>Everything else you need to install your new instrument will be provided.</li></ul>'
-            },
-            {
-                title: 'What languages are available for the Smart Install guides?',
-                content: '<ul><li>Mastersizer: English, Chinese, Korean, French, German and Japanese</li><li>Zetasizer: English, Chinese, Korean, French, German and Japanese</li><li>Epsilon 1: English, French, German and Japanese, Spanish and Portuguese</li></ul>'
-            }
-        ]
-    }
-}

package/src/_includes/components/accordion/accordion.md

@@ -1,15 +0,0 @@
-- To make an item display in its opened state when the page loads, add the class `c-accordion--item__open`
-- The classnames `o-prose` and `u-flow--prose` on the content are optional
-## Blank HTML template
-```html
-<dl class="c-accordion">
-    <div class="c-accordion__item">
-        <dt class="c-accordion__title">Title one</dt>
-        <dd class="c-accordion__content o-prose u-flow--prose">Content one</dd>
-    </div>
-    <div class="c-accordion__item">
-        <dt class="c-accordion__title">Title two</dt>
-        <dd class="c-accordion__content o-prose u-flow--prose">Content two</dd>
-    </div>
-</dl>
-```

package/src/_includes/components/accordion/accordion.njk

@@ -1,10 +0,0 @@
-{% from "components/icon/macro.njk" import icon %}
-
-<dl class="c-accordion">
-    {% for item in params.items %}
-        <div class="c-accordion__item {{ 'c-accordion__item--open' if item.state }}">
-            <dt class="c-accordion__title">{{ item.title }}</dt>
-            <dd class="c-accordion__content o-prose u-flow--prose">{{ item.content | safe }}</dd>
-        </div>
-    {% endfor %}
-</dl>

package/src/_includes/components/accordion/accordion.scss

@@ -1,54 +0,0 @@
-.c-accordion {
-    &__item {
-        @include padding('xs',0);
-        
-        & + & {
-            border-top: 1px solid color('petrol', 'step-2');
-        }
-    }
-    
-    &__title {
-        @include step(1);
-        @include padding('xs',0);
-        cursor: pointer;
-        font-weight: weight('bold');
-        position: relative;
-
-        &:before {
-            background-image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1V17M1 9H17" stroke="%23252525" stroke-width="2" stroke-linecap="round"/></svg>');
-            background-position: center center;
-            background-repeat: no-repeat;
-            content: "";
-            display: block;
-            height: 1em;
-            left: 0;
-            position: absolute;
-            width: 1em;
-        }
-
-        .c-accordion__item--open &:before {
-            background-image: url('data:image/svg+xml;utf8,<svg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1H9" stroke="%23252525" stroke-width="2" stroke-linecap="round"/></svg>');
-            transform: scaleX(1.75);
-        }
-    }
-
-    &__content {
-        margin-left: 0;
-        @include padding-bottom('xs');
-        display: none;
-
-        .c-accordion__item--open & {
-            display: block;
-        }
-    }
-
-    &__title,
-    &__content {
-        @include padding-left('l-xl');
-    }
-}
-
-// Fix for Tridion mangling the HTML
-.o-prose .c-accordion > dd:not([class]) {
-    margin-left: 0;
-}

package/src/_includes/components/accordion/macro.njk

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

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

@@ -1,65 +0,0 @@
-module.exports = {
-  title: 'Alert',
-  component: {
-    name: 'alert'
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=315%3A6334',
-  context: {
-    content: '<p>During the COVID-19 situation, our sales team are still available to answer all your sales enquiries</p>'
-  },
-  variants: [
-    {
-      title: 'Error',
-      context: {
-        type: 'error'
-      }
-    },
-    {
-      title: 'Warning',
-      context: {
-        type: 'warning'
-      }
-    },
-    {
-      title: 'Success',
-      context: {
-        type: 'success'
-      }
-    },
-    {
-      title: 'Different icon',
-      context: {
-        icon: 'log-out'
-      }
-    },
-    {
-      title: 'With link',
-      context: {
-        content: '<p><a class="c-alert__text-link c-twi" href="#">During the COVID-19 situation</a>, our sales team are still available to answer all your sales enquiries</p>'
-      }
-    },
-    {
-      title: 'Multiline',
-      context: {
-        content: '<h6>Check your email</h6><p>Thank you for signing up for this event.</p><p>We\'ve sent you an email with further details on the event. Please note that you may need to access this email to complete your registration.</p>',
-        type: 'success',
-        multiline: true
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['content', 'html', 'HTML for the alert'],
-        ['type', 'string', '"error", "success", "warning", "info"'],
-        ['icon', 'string', 'An icon from the <a href="/components/icons">icons</a> system']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-alert--[type]', 'info, error, warning, success', 'The \'type\' of alert']
-      ]
-    }
-  ]
-}

package/src/_includes/components/alert/alert.njk

@@ -1,27 +0,0 @@
-{% from "components/icon/macro.njk" import icon %}
-
-{% set icons = {
-  info: 'info',
-  warning: 'info',
-  success: 'tick',
-  error: 'cross'
-} %}
-
-{% set type = params.type or 'info' %}
-
-{%- set classNames = "mp c-alert" -%}
-
-{%- if params.classes -%}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-
-{%- if params.multiline -%}
-  {% set classNames = classNames + " c-alert--multiline" %}
-{% endif %}
-
-{% set classNames = classNames + " c-alert--" + type %}
-
-<div class="{{ classNames }}">
-  {{ params.content | safe }}
-  {{ icon({ id: params.icon or icons[type] }) }}
-</div>

package/src/_includes/components/alert/alert.scss

@@ -1,80 +0,0 @@
-.c-alert {
-  --alert-border: #{color('utility-blue')};
-  border-left: 4px solid color('utility-blue');
-  border-left-color: var(--alert-border);
-
-  background: color('utility-blue', 'step-3');
-  @include padding('s', 's', 's', 'xl');
-  position: relative;
-
-  &.mp p {
-    line-height: lh('prose');
-  }
-
-  & > * + * {
-    margin-top: 1em;
-  }
-
-  :has(.u-fill):hover .c-alert__text-link {
-    text-decoration: none;
-  }
-
-  a,
-  &__text-link,
-  &__text-link.c-twi {
-    color: var(--alert-border);
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  & .c-icon {
-    position: absolute;
-    left: 1.25rem;
-    top: 1.25rem;
-    margin-top: 0;
-    font-size: 1.5rem;
-    color: black;
-    color: var(--alert-border);
-  }
-
-  pre {
-    background: transparent;
-    padding: 0;
-    max-width: 100%;
-    overflow-x: auto;
-    @include step(-1);
-  }
-
-  &--multiline {
-    @include padding('s', 's', 's', 0);
-
-    &> *:not(.c-icon) {
-      @include padding-left('s');
-
-      &:first-child {
-        color: var(--alert-border);
-        @include padding-left('xl');
-        font-size: inherit;
-        line-height: lh('prose');
-      }
-    }
-  }
-
-  &--warning {
-    background: color('utility-orange', 'step-3');
-    --alert-border: #{color('utility-orange')};
-  }
-  
-  &--success {
-    background: color('green', 'step-3');
-    --alert-border: #{color('green')};
-  }
-
-  &--error {
-    background: color('red', 'step-3');
-    --alert-border: #{color('red')};
-  }
-}

package/src/_includes/components/alert/macro.njk

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{%- 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

@@ -1,22 +0,0 @@
-.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

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

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

@@ -1,20 +0,0 @@
-module.exports = {
-  title: 'Breadcrumb',
-  component: {
-    name: 'breadcrumb',
-  },
-  context: {
-    links: [
-      { link: '/en/services', label: 'Contract Research and Manufacturing...' },
-      { link: '/en/services/pharmaceutical-drug-development', label: 'Pharmaceutical drug development...' },
-      { link: '', label: 'Pre-clinical process research and...' },
-    ]
-  },
-  props: [
-    {
-      table: [
-        ['links', 'link[]', '"link" and "label" objects']
-      ]
-    }
-  ]
-}

package/src/_includes/components/breadcrumb/breadcrumb.njk

@@ -1,19 +0,0 @@
-{% from "components/icon/macro.njk" import icon %}
-
-<nav class="c-breadcrumb {{ params.classes }}" aria-label="Breadcrumb">
-    <ol class="c-breadcrumb__list" role="list">
-      {% for item in params.links %}
-        {% if loop.index < loop.length %}
-          <li class="c-breadcrumb__item" role="listitem">
-              <a href="{{ item.link }}" class="c-breadcrumb__link">{{ item.label }}</a>
-              {{ icon({ id: 'chevron-down' }) }}
-          </li>
-        {% else %}
-          <li class="c-breadcrumb__item" role="listitem">
-              <span class="c-breadcrumb__current" aria-current="{{ item.label }}">{{ item.label}}</span>
-          </li>
-        {% endif %}
-      {% endfor %}
-    </ol>
-</nav>
-

package/src/_includes/components/breadcrumb/breadcrumb.scss

@@ -1,69 +0,0 @@
-.c-breadcrumb {
-  &__list {
-    @include padding-bottom("s-m");
-    display: flex;
-    overflow-x: auto;
-  }
-
-  &__item {
-    font-size: var(--step--2);
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-
-    .c-icon {
-      @include margin-right("3xs");
-      @include margin-left("3xs");
-      color: color('grey', 'step-1');
-      transform: rotate(270deg);
-    }
-  }
-
-  &__link {
-    color: color('utility-blue', 'step-1');
-    text-decoration: underline;
-  
-    &:hover {
-      color: color('utility-blue', 'step-1');
-      text-decoration: none;
-    }
-  }
-
-  &__current {
-    color: color('grey', 'step-1');
-  }
-
-  // color: color('utility-blue');
-
-  // &__wrap {
-  //   position: relative;
-
-  //   &:after {
-  //     content: '';
-  //     background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-  //     position: absolute;
-  //     z-index: 1;
-  //     height: 100%;
-  //     right: 0;
-  //     top: 0;
-  //     @include space('width', 'l');
-
-  //     @media (min-width: $wrapper) {
-  //       display: none;
-  //     }
-  //   }
-  // }
-
-  // &__list {
-  //   @include padding-bottom('m-l');
-  //   @include margin-bottom('m-l');
-  //   border-bottom: 1px solid color('petrol', 'step-2');
-  //   white-space: nowrap;
-  //   overflow-x: auto;
-  //   display: flex;
-
-  //   & > * + * {
-  //     @include margin-left('m-l');
-  //   }
-  // }
-}

package/src/_includes/components/breadcrumb/macro.njk

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

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

@@ -1,89 +0,0 @@
-module.exports = {
-  title: 'Button',
-  component: {
-    name: 'button',
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=225%3A6779',
-  context: {
-    label: 'Button',
-  },
-  variants: [
-    {
-      title: 'Red',
-      context: {
-        colour: 'red'
-      }
-    },
-    {
-      title: 'Blue',
-      context: {
-        colour: 'blue'
-      }
-    },
-    {
-      title: 'White',
-      context: {
-        colour: 'white'
-      }
-    },
-    {
-      title: 'Utility blue',
-      context: {
-        colour: 'utility-blue'
-      }
-    },
-    {
-      title: 'Outline green',
-      context: {
-        colour: 'outline-green'
-      }
-    },
-    {
-      title: 'Outline white',
-      context: {
-        colour: 'outline-white'
-      }
-    },
-    {
-      title: 'Small',
-      context: {
-        classes: 'c-button--small'
-      }
-    },
-    {
-      title: 'Loading',
-      context: {
-        classes: 'c-button--loading'
-      }
-    },
-    {
-      title: 'Disabled',
-      context: {
-        attrs: 'disabled'
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['link', 'string', 'Converts from a button an anchor'],
-        ['colour', 'string', 'eg. "red", "outline-green"'],
-        ['inline', 'bool', 'Is the button inline-flex or flex?'],
-        ['classes', 'string', 'Additional class attributes'],
-        ['attrs', 'string', 'Addtional HTML attributes']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-button--inline', '', 'Makes the button inline-flex'],
-        ['c-button--[colour]', 'petrol, red, blue, white, outline-green, outline-white'],
-        ['c-button--small', '', 'Shrinks the button'],
-        ['c-button--wide', '', 'Makes the button 100% width'],
-        ['c-button--tight', '', 'Reduces the left/right padding'],
-        ['c-button--loading', '', 'Replace the button text with a loading indicator']
-      ]
-    }
-  ]
-}

package/src/_includes/components/button/button.njk

@@ -1,38 +0,0 @@
-{% from "components/twi/macro.njk" import twi %}
-
-{%- set classNames = "mp c-button" -%}
-
-{%- if params.classes -%}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-{%- if params.inline -%}
-  {% set classNames = classNames + " c-button--inline" %}
-{%- endif -%}
-{%- if params.colour -%}
-  {% set classNames = classNames + " c-button--" + params.colour %}
-{% endif -%}
-
-{%- set attrs = '' -%}
-{%- if params.attrs -%}
-  {% set attrs = ' ' + params.attrs %}
-{% endif %}
-
-{%- if params.link -%}
-<a href="{{ params.link }}" class="{{ classNames }}" {{ attrs }}>
-{%- elseif params.type == 'span' -%}
-<span class="{{ classNames }}" {{ attrs }}>
-{%- else -%}
-<button type="{{ params.type or 'button' }}" class="{{ classNames}}" {{ attrs }}>
-{%- endif -%}
-  {%- if params.icon -%}
-    {{ twi({ icon: params.icon, align: params.align, label: params.label }) }}
-  {%- else -%}
-    {{ params.label }}
-  {%- endif -%}
-{%- if params.link -%}
-</a>
-{%- elseif params.type == 'span' -%}
-</span>
-{%- else -%}
-</button>
-{%- endif -%}