mp-design-system 1.2.63 → 1.2.65

package/package.json

@@ -1,46 +1,35 @@
-{
-  "name": "mp-design-system",
-  "version": "1.2.63",
-  "description": "",
-  "scripts": {
-    "dev": "npm-run-all --parallel bundle:*",
-    "bundle:eleventy": "eleventy --serve --quiet",
-    "bundle:vite": "vite build",
-    "build": "run-s prod:*",
-    "prod:eleventy": "eleventy",
-    "prod:vite": "rimraf dist/build && vite build",
-    "prepublishOnly": "rimraf dist && npm run prod:vite"
-  },
-  "files": [
-    "src",
-    "dist"
-  ],
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@11ty/eleventy": "^2.0.1",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^3.2.2",
-    "@parcel/transformer-sass": "^2.4.0",
-    "@vitejs/plugin-vue": "^3.0.0",
-    "dotenv": "^8.6.0",
-    "html-prettify": "^1.0.6",
-    "markdown-it": "^12.3.2",
-    "markdown-it-prism": "^2.2.3",
-    "npm-run-all": "^4.1.5",
-    "require-glob": "^4.1.0",
-    "rimraf": "^3.0.2",
-    "sass": "^1.71.0",
-    "slugify": "^1.6.5",
-    "vite": "^3.0.0",
-    "vite-plugin-sass-dts": "^1.3.29"
-  },
-  "alias": {
-    "mp": "./node_modules/mp-design-system/src/assets/scss",
-    "comp": "./src/_includes/components"
-  },
-  "dependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
-    "vite": "^6.0.3"
-  }
-}
+{
+  "name": "mp-design-system",
+  "version": "1.2.65",
+  "type": "module",
+  "files": [
+    "dist/build/**/*"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
+    "prepublishOnly": "rimraf dist && npm run build"
+  },
+  "dependencies": {
+    "pinia": "^2.2.6",
+    "raw-loader": "^4.0.2",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.14.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "prettier": "^3.4.2",
+    "rimraf": "^6.0.1",
+    "sass": "^1.71.0",
+    "utopia-core-scss": "^1.2.1",
+    "vite": "^6.0.1",
+    "vite-plugin-vue-devtools": "^7.6.5"
+  }
+}

package/src/_data/components.js

@@ -1,104 +0,0 @@
-const slugify = require('slugify');
-const requireGlob = require('require-glob');
-const categories = require('../_includes/components/component/categories');
-
-function convertComponent(component, key) {
-  // Extract variants from component and remove them
-  let { variants = [] } = component;
-  delete component.variants;
-
-  // Back out if the object isn't valid
-  if (!component || !component.title) return null;
-
-  // Sensible defaults for previews, categories & slugs
-  component.preview = component.preview || 'default';
-  component.category = component.category || categories.component;
-  const compSlug = component.slug || slugify(component.title.toLowerCase());
-  
-  // Loop the variants, returning a merged combo of component, then variant
-  variants = variants.map(variant => {
-    const slug = slugify(variant.title.toLowerCase());
-    return {
-      ...component,
-      ...variant,
-      variant: true,
-      preview: variant.preview !== undefined ? variant.preview || 'default' : component.preview || 'default',
-      context: {
-        ...component.context,
-        ...variant.context
-      },
-      originalTitle: variant.title,
-      title: component.title + ' - ' + variant.title,
-      slug: compSlug + '-' + slug
-    }
-  });
-
-  // Create a siblings group (a slimmed down array of component objects)
-  const siblings = [
-    {
-      slug: compSlug,
-      title: component.title,
-    },
-    ...variants.map(x => ({ slug: x.slug, title: x.originalTitle }))
-  ];
-    
-  // Return the main component, then the variants
-  return [
-    {
-      slug: compSlug,
-      ...component,
-      siblings
-    },
-    ...variants.map(x => ({
-      ...x,
-      siblings
-    }))
-  ]
-}
-
-function reducer(options, tree, fileObj) {
-  if (!fileObj) return tree;
-  if (tree.components === undefined) tree.components = [];
-  tree.components.push(fileObj.exports);
-  return tree;
-}
-
-module.exports = async function() {
-  // Pull in all the config files
-  const modules = await requireGlob('../_includes/**/*.config.js', { reducer, bustCache: true });
-
-  // Convert the components into our required format
-  const components = modules.components.map(convertComponent).filter(Boolean).flat();
-
-  // Sort them alphabetically
-  components.sort((a, b) => {
-    return a.title > b.title ? 1 : -1;
-  });
-
-  // Take the categories object and convert it into component groups
-  const componentCategories = Object.values(categories).map(x => ({
-    name: x,
-    components: []
-  }));
-
-  // Place each component into the correct group
-  components.forEach(x => {
-    let category = componentCategories.find(y => y.name === x.category);
-    if (!category) return
-
-    category.components.push(x);
-  });
-  
-  // Return the components and the menu, broken down into categories
-  return {
-    components,
-    menu: componentCategories.map(x => {
-      return {
-        name: x.name,
-        components: x.components
-          .filter(x => !x.variant)
-          .map(x => ({ slug: x.slug, title: x.title, siblings: x.siblings.filter(y => y.slug !== x.slug) }))
-      }
-    })
-  };
-}

package/src/_data/config.js

@@ -1,14 +0,0 @@
-const package = require('../../package.json');
-
-module.exports = function () {
-  const url = process.env.URL;
-
-  return {
-    name: 'Project Franklin',
-    logo: ['Franklin', 'Design system & brand guide'],
-    creator: 'Malvern Panalytical',
-    dsVersion: package.version,
-    url,
-    openGraphImage: `${url}/static/img/open-graph-image.jpg`
-  }; 
-}

package/src/_data/helpers.js

@@ -1,6 +0,0 @@
-module.exports = {
-  currentYear() {
-    const today = new Date();
-    return today.getFullYear();
-  }
-};

package/src/_headers

@@ -1,9 +0,0 @@
-/*
-  Content-Security-Policy: default-src 'self'; base-uri 'self'; block-all-mixed-content; font-src 'self' https://fonts.gstatic.com; form-action 'self'; frame-src 'self' https://brand.malvernpanalytical.com https://www.youtube.com https://challenges.cloudflare.com https://newassets.hcaptcha.com; frame-ancestors 'self' https://brand.malvernpanalytical.com; img-src 'self' data: https://dam.malvernpanalytical.com https://p3.aprimocdn.net https://img.youtube.com; object-src 'none'; picture-in-picture 'self'; sandbox allow-forms allow-same-origin allow-scripts allow-downloads; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://eu.altcha.org https://challenges.cloudflare.com https://js.hcaptcha.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; upgrade-insecure-requests;
-  X-Content-Type-Options: nosniff
-  X-Frame-Options: SAMEORIGIN
-  X-XSS-Protection: 1; mode=block
-  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
-  Referrer-Policy: strict-origin-when-cross-origin
-  Permissions-Policy: accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=(), sync-xhr=(), microphone=(), speaker=()
-  Feature-Policy: accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; encrypted-media 'none'; fullscreen 'self'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none'; picture-in-picture 'none'; speaker 'self'; sync-xhr 'self'; usb 'none'; vr 'none'

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