mp-design-system 1.2.63 → 1.2.65

package/src/index.njk

@@ -1,152 +0,0 @@
----
-subtitle: Our design system helps us create consistent experiences across our websites and beyond. It also makes the design and development process faster, more efficient and scalable.
-description: Franklin is Malvern Panalytical's design system for public-facing websites and digital products.
-layout: system-home-page
-eleventyComputed:
-  title: "Welcome to the Franklin design system"
----
-
-{% from "components/prose/macro.njk" import markdown %}
-{% from "components/product-signpost/macro.njk" import productSignpost %}
-
-<div class="o-grid o-grid--of-two u-margin-bottom-l-xl">
-  <div class="u-flow u-pad-right-l">
-    <h2 class="c-usp__title">For developers</h2>
-    <p>If you're developing a web site or app, start here.</p>
-    <ul class="o-grid o-grid--of-two">
-      {{ productSignpost ({
-        title: 'Getting started',
-        description: '<p>Using the Franklin design system</p>',
-        link: '/components',
-        classes: 'c-product-signpost--bordered'
-      }) }}
-      {{ productSignpost ({
-        title: 'Installation',
-        description: '<p>How to consume our CSS & JS via NPM</p>',
-        link: '/components/installation',
-        classes: 'c-product-signpost--bordered'
-      }) }}
-      {{ productSignpost ({
-        title: 'Component library',
-        description: '<p>Styles and reusable building blocks</p>',
-        link: '/components',
-        classes: 'c-product-signpost--bordered'
-      }) }}
-      {{ productSignpost ({
-        title: 'Grid system',
-        description: '<p>How to lay out pages and screens</p>',
-        link: '/components/grid',
-        classes: 'c-product-signpost--bordered'
-      }) }}
-    </ul>
-  </div>
-  <div class="u-flow u-pad-left-l">
-    <h2 class="c-usp__title">For non-developers</h2>
-    <p>Not writing code? Start here.</p>
-    <ul class="o-grid o-grid--of-two">
-      {{ productSignpost ({
-        title: 'Quick start guide',
-        description: '<p>The basics of Malvern Panalytical\'s visual style</p>',
-        link: '/quickstart',
-        classes: 'c-product-signpost--bordered'
-      }) }}
-      {{ productSignpost ({
-        title: 'Color',
-        description: '<p>The Malvern Panalytical brand color palette</p>',
-        link: '/brand/colors',
-        classes: 'c-product-signpost--bordered'
-      }) }}
-      {{ productSignpost ({
-        title: 'Typography',
-        description: '<p>Our guidelines for fonts, weights, and spacing</p>',
-        link: '/brand/typography',
-        classes: 'c-product-signpost--bordered'
-      }) }}
-      {{ productSignpost ({
-        title: 'Tone of voice',
-        description: '<p>Make your writing clearer, simpler, and more inspiring</p>',
-        link: '/content',
-        classes: 'c-product-signpost--bordered'
-      }) }}
-    </ul>
-  </div>
-</div>
-
-{% set content %}
-
-## What is Franklin?
-
-Franklin is Malvern Panalytical's **design system** for web-based marketing materials.
-
-#### What's a design system?
-
-A set of brand guidelines and a library of HTML/CSS/JS components. Using this system is the quickest and easiest way to ensure your website or web-app is on brand.
-
-The [Design Systems Handbook](https://www.designbetter.co/design-systems-handbook) by InVision is a great (free) way to learn more about design systems.
-
-#### Are there other design systems in use?
-
-There are two other design systems in use at Malvern Panalytical.
-
-- [Sencillo](https://confluence.systems.mp/pages/viewpage.action?spaceKey=FA&title=MP+Sencillo+-+Design+System) (pronounced *sehn-see-yoh*) is a design system used in Smart Manager, Agrilytics, and other web-based customer-facing software applications.
-- [Malvern Panalytical User Interface Guidelines](https://malvern.sharepoint.com/sites/o365-sw-ebl/SitePages/User%20Interface%20Guidelines/Malvern-Panalytical-User-Interface-Guidelines.aspx) (also known as the XBL) is the Design System that is used in our desktop software, including the new OmniTrust. At the time of writing, it hasn't been rolled out to all platforms but it should be the go to Design System for any new software that we create for our products. It is also backed up with a reusable framework that provides the styles and controls within a fixed layout base application.
-
-#### Where does Franklin come in?
-
-<div class="ds-table c-table c-table--responsive">
-
-| Design system | [MP User Interface Guidelines (XBL)](https://malvern.sharepoint.com/sites/o365-sw-ebl/SitePages/User%20Interface%20Guidelines/Malvern-Panalytical-User-Interface-Guidelines.aspx) | [MP Sencillo](https://confluence.systems.mp/pages/viewpage.action?spaceKey=FA&title=MP+Sencillo+-+Design+System) | Franklin |
-|---------------|------------------------------------|-------------|----------|
-| Target | Desktop and tablet based software for our products | Web-based apps that are part of the Smart Manager platform | Commercial websites |
-| Goal | A common look and feel with a consistent user experience across all of our product software | Bridge the gap between our desktop software and our web sites, providing a familiar and branded experience | A common look and feel with a consistent user experience across all of our web sites |
-| Framework technologies | .NET C# and WPF/Xaml | .NET Blazor (C#), CSS and HTML | CSS, HTML and JavaScript |
-| Devices | Desktops and tablets | Desktops, tablets and mobiles | Desktops, tablets and mobiles |
-| Target Content Type | Fast changing, short textual elements, data visualisations and high user interactivity | Frequently changing, short textual elements, data visualisations and medium user interactivity | Infrequently changing, blocks of copy, marketing/product photos and low user interactivity |
-
-</div>
-
-{% endset %}
-
-{% set latest %}
-## Latest updates
-##### V1.2.13 - November 2023
-
-- New [product comparison cards](/components/product-card-with-features-list)
-- New ["Sticky" internal nav](/components/internal-nav-sticky-on-scroll)
-- Updated [comparison table](/components/comparison-table) design
-{% endset %}
-
-<div class="o-grid o-grid--layout o-grid--8/4">
-
-{{ markdown({
-  content: content
-}) }}
-
-<div><div class="c-slat c-slat--crystal u-bg-blue-step-3 u-pad-x-l">
-  {{ markdown({
-    content: latest
-  }) }}
-</div></div>
-
-</div>
-
-<style>
-  .ds-table {
-    border-left: 1px solid #ebf1f2;
-  }  
-  .ds-table table th:nth-child(1),
-  .ds-table table td:nth-child(1) {
-    background-color: #fff;
-    border-color: #ebf1f2;
-    color: #333;
-  }
-  .ds-table table th:nth-child(2) {
-    background-color: #00a2c2;
-  }
-  .ds-table table th:nth-child(3) {
-    background-color: #005461;
-  }
-  .ds-table table th:nth-child(4) {
-    background-color: #003039;
-  }
-</style>

package/src/patterns/form.njk

@@ -1,349 +0,0 @@
----
-title: Form inputs
-layout: patterns-page
----
-
-{% from "components/input/macro.njk" import input %}
-{% from "components/input/macro.njk" import select %}
-{% from "components/input/macro.njk" import textarea %}
-{% from "components/input/macro.njk" import checkbox %}
-{% from "components/input/macro.njk" import radio %}
-{% from "components/input/macro.njk" import toggle %}
-{% from "components/alert/macro.njk" import alert %}
-
-<div class="o-grid o-grid--9/3 o-grid--layout">
-    <div class="u-flow--m">
-        <form class="mp-dynamicform">
-            <section class="c-form__section u-flow--m">
-                {{ input({
-                    label: 'Text',
-                    name: 'text_input',
-                    id: 'text_input',
-                    type: 'text',
-                    placeholder: 'Placeholder'
-                })}}
-
-                {{ select({
-                    label: "Select",
-                    name: "select",
-                    id: "select",
-                    placeholder: "Placeholder",
-                    options: [
-                        [
-                            "option-1",
-                            "Option 1"
-                        ],
-                        [
-                            "Option 2"
-                        ],
-                        [
-                            "option-3",
-                            "Option 3"
-                        ]
-                    ]
-                })}}
-                
-                {{ textarea({
-                    label: 'Textarea',
-                    name: 'textarea',
-                    id: 'textarea',
-                    type: 'textarea',
-                    placeholder: 'Placeholder'
-                })}}
-
-                <label class="c-label">Checkboxes</label>
-                {% for _ in ["Live","Laugh","Love"] %}
-                    <div>
-                        {{ checkbox({
-                            label: _,
-                            name: 'tenets',
-                            id: _,
-                            value: _
-                        })}}
-                    </div>
-                {% endfor %}
-                
-                <label class="c-label">Radio buttons</label>
-                {% for _ in ["Bears","Beets","Battlestar Galactica"] %}
-                    <div>
-                        {{ radio({
-                            label: _,
-                            name: 'facts',
-                            id: _,
-                            value: _
-                        })}}
-                    </div>
-                {% endfor %}
-
-                <label class="c-label">Toggle</label>
-                {{ toggle({
-                    label: 'Toggle',
-                    name: 'toggle',
-                    id: 'toggle',
-                    type: 'toggle',
-                    placeholder: 'Toggle?'
-                })}}
-            </section>
-            {# MISC FIELD TYPES EXAMPLES #}
-            <section class="c-form__section u-flow--m">
-                <legend id="variations"><code>&lt;input&gt;</code> variations</legend>
-                
-                {{ input({
-                    label: 'Email',
-                    name: 'email_input',
-                    id: 'email_input',
-                    type: 'email',
-                    placeholder: 'Placeholder'
-                })}}
-                
-                {{ input({
-                    label: 'Password',
-                    name: 'password_input',
-                    id: 'password_input',
-                    type: 'password'
-                })}}
-                
-                {{ input({
-                    label: 'Date',
-                    name: 'date_input',
-                    id: 'date_input',
-                    type: 'date',
-                    placeholder: 'Placeholder'
-                })}}
-
-                {{ input({
-                    label: 'Search',
-                    name: 'search_input',
-                    id: 'search_input',
-                    type: 'search',
-                    placeholder: 'Placeholder'
-                })}}
-                
-                {{ input({
-                    label: 'Telephone',
-                    name: 'tel_input',
-                    id: 'tel_input',
-                    type: 'tel',
-                    placeholder: 'Placeholder'
-                })}}
-                
-                {{ input({
-                    label: 'Number',
-                    name: 'number_input',
-                    id: 'number_input',
-                    type: 'number',
-                    placeholder: 'Placeholder'
-                })}}
-
-                {{ input({
-                    label: 'File',
-                    name: 'file_input',
-                    id: 'file_input',
-                    type: 'file',
-                    classes: 'c-input--file'
-                })}}
-                
-                {{ input({
-                    label: 'Range',
-                    name: 'range_input',
-                    id: 'range_input',
-                    type: 'range',
-                    placeholder: 'Placeholder'
-                })}}
-                
-                {{ input({
-                    label: 'URL',
-                    name: 'url_input',
-                    id: 'url_input',
-                    type: 'url',
-                    placeholder: 'Placeholder'
-                })}}
-
-                {{ input({
-                    label: 'Color',
-                    name: 'color_input',
-                    id: 'color_input',
-                    type: 'color',
-                    placeholder: 'Placeholder'
-                })}}
-            </section>
-            {# DISABLED EXAMPLES #}
-            <section class="c-form__section u-flow--m">
-                <legend id="disabled">Disabled</legend>
-                {{ input({
-                    label: 'Text',
-                    name: 'text_input',
-                    id: 'text_input',
-                    type: 'text',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-
-                {{ select({
-                    label: "Select",
-                    name: "select",
-                    id: "select",
-                    placeholder: "Placeholder",
-                    disabled: true,
-                    options: [
-                        [
-                            "option-1",
-                            "Option 1"
-                        ],
-                        [
-                            "Option 2"
-                        ],
-                        [
-                            "option-3",
-                            "Option 3"
-                        ]
-                    ]
-                })}}
-                
-                {{ textarea({
-                    label: 'Textarea',
-                    name: 'textarea',
-                    id: 'textarea',
-                    type: 'textarea',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-
-                <label class="c-label">Checkboxes</label>
-                {% for _ in ["Live","Laugh","Love"] %}
-                    <div>
-                        {{ checkbox({
-                            label: _,
-                            name: 'tenets--disabled',
-                            id: _+'--disabled',
-                            disabled: true
-                        })}}
-                    </div>
-                {% endfor %}
-                
-                <label class="c-label">Radio buttons</label>
-                {% for _ in ["Bears","Beets","Battlestar Galactica"] %}
-                    <div>
-                        {{ radio({
-                            label: _,
-                            name: 'facts--disabled',
-                            id: _+'--disabled',
-                            disabled: true
-                        })}}
-                    </div>
-                {% endfor %}
-                
-                <label class="c-label">Toggle</label>
-                {{ toggle({
-                    label: 'Toggle',
-                    name: 'toggle--disabled',
-                    id: 'toggle--disabled',
-                    type: 'toggle',
-                    placeholder: 'Toggle?',
-                    disabled: true
-                })}}
-
-                {{ input({
-                    label: 'Email',
-                    name: 'email_input',
-                    id: 'email_input',
-                    type: 'email',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-                
-                {{ input({
-                    label: 'Password',
-                    name: 'password_input',
-                    id: 'password_input',
-                    type: 'password',
-                    disabled: true
-                })}}
-                
-                {{ input({
-                    label: 'Date',
-                    name: 'date_input',
-                    id: 'date_input',
-                    type: 'date',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-
-                {{ input({
-                    label: 'Search',
-                    name: 'search_input',
-                    id: 'search_input',
-                    type: 'search',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-                
-                {{ input({
-                    label: 'Telephone',
-                    name: 'tel_input',
-                    id: 'tel_input',
-                    type: 'tel',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-                
-                {{ input({
-                    label: 'Number',
-                    name: 'number_input',
-                    id: 'number_input',
-                    type: 'number',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-
-                {{ input({
-                    label: 'File',
-                    name: 'file_input',
-                    id: 'file_input',
-                    type: 'file',
-                    classes: 'c-input--file',
-                    disabled: true
-                })}}
-                
-                {{ input({
-                    label: 'Range',
-                    name: 'range_input',
-                    id: 'range_input',
-                    type: 'range',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-                
-                {{ input({
-                    label: 'URL',
-                    name: 'url_input',
-                    id: 'url_input',
-                    type: 'url',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-
-                {{ input({
-                    label: 'Color',
-                    name: 'color_input',
-                    id: 'color_input',
-                    type: 'color',
-                    placeholder: 'Placeholder',
-                    disabled: true
-                })}}
-            </section>
-        </form>
-
-        {{ alert({
-            type: 'info',
-            content: '<h3>To do:</h3>
-                <ul>
-                    <li>Allow extra attributes for some input types (e.g. "step" on number inputs)</li>
-                    <li>Allow state attribute, e.g. disabled, error, prefilled</li>
-                    <li>Show/hide control on password input (optional)</li>
-                    <li>Better design for range input</li>
-                    <li>Better design for color input</li>
-                </ul>'
-        }) }}
-    </div>
-</div>

package/src/patterns/grid-of-cards.njk

@@ -1,66 +0,0 @@
----
-title: Grid of cards
-layout: patterns-page
----
-
-{% from "components/card/macro.njk" import card %}
-
-<div class="o-grid o-grid--of-three o-grid--swipeable">
-  {{ card({
-    theme: {
-      layout: 'single',
-      size: 'medium',
-      name: 'alt'
-    },
-    image: {
-      src: '/static/img/blog-page-image-1.jpg',
-      alt: ''
-    },
-    header: {
-      title: 'Mixing it with the Mastersizer!'
-    },
-    body: {
-      content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
-    },
-    link: '/prototype/blog-post',
-    tag: 'News'
-  }) }}
-  {{ card({
-    theme: {
-      layout: 'single',
-      size: 'medium',
-      name: 'alt'
-    },
-    image: {
-      src: '/static/img/blog-page-image-1.jpg',
-      alt: ''
-    },
-    header: {
-      title: 'GPC/SEC standards: making them last'
-    },
-    body: {
-      content: '<p>Earlier this year I highlighted the different types of GPC/SEC standards available and where to find them on our eStore. In this post, I’m going to share some tips and tricks about preparing your standards and making them last. But first, what standard should you be using? In my previous post, I discussed how the […]</p>'
-    },
-    link: '/prototype/blog-post',
-    tag: 'News'
-  }) }}
-  {{ card({
-    theme: {
-      layout: 'single',
-      size: 'medium',
-      name: 'alt'
-    },
-    image: {
-      src: '/static/img/blog-page-image-1.jpg',
-      alt: ''
-    },
-    header: {
-      title: 'Viral Vector Vaccines: A Borrowed Technology from Gene Therapy Advancements'
-    },
-    body: {
-      content: '<p>Advances in recombinant DNA technology, genomics, and immunology have greatly influenced the vaccine development process. The genetic manipulation of viruses makes them suitable as vectors for gene delivery, providing a novel and unique opportunity for vaccine design. Viruses survive and replicate by invading their host’s cells and hijacking their protein-making machinery. These virus particles contain […]</p>'
-    },
-    link: '/prototype/blog-post',
-    tag: 'News'
-  }) }}
-</div>

package/src/patterns/index.njk

@@ -1,19 +0,0 @@
----
-title: Patterns
-layout: system-page
-sidebar: components
----
-
-{% from "components/prose/macro.njk" import markdown %}
-
-{% set content %}
-Patterns are groups of components, held together with foundational utility classes. Use this space as a way of testing components in-situ with other components.
-
-{% for p in collections.patterns %}
-  - [{{ p.data.title }}]({{ p.url }})
-{% endfor %}
-{% endset %}
-
-{{ markdown({
-  content: content
-}) }}