mp-design-system 1.2.64 → 1.2.65

package/src/prototype/card-test.njk

@@ -1,147 +0,0 @@
----
-title: Card test
-tags: prototype
-tagTitle: Card test
----
-
-{% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
-
-{% extends "page.njk" %}
-
-{% block content %}
-
-<div class="c-slat u-wrap">
-    <div class="o-grid o-grid--4/8">
-
-        <article class="mp c-card c-card--layout-single c-card--bordered c-card--size-medium  c-card--has-image c-card--bordered">
-
-            <div class="c-card__wrapper u-margin-top-xs">
-                <figure class="c-card__figure u-margin-left-xs u-margin-right-xs">
-                    <img src="https://p3.aprimocdn.net/malvernpanalytical/a0ad275f-19b8-4c4b-8bae-ad9e00ddb574/636379490590590917OD_Original%20file.jpg?quality=60&amp;height=200" alt="" class="u-fill" loading="lazy" height="200">
-                </figure>
-                <div class="c-card__primary">
-                    <header class="c-card__header u-flow--2xs">
-                        <h2 class="c-h c-card__title">Epsilon&nbsp;1 Industrie minière </h2>
-                    </header>
-                    <div class="c-card__content u-flow">Portable elemental analysis for exploration and ore analysis in the field</div>
-                </div>
-                <a class="u-fill u-fill--link" href="/fr/products/product-range/epsilon-range/epsilon1/epsilon-1-mining/" target="">Epsilon&nbsp;1 Industrie minière </a>
-            </div>
-        </article>
-
-        <article class="mp c-card c-card--layout-multi c-card--size-medium c-card--bordered c-card--has-tag">
-            <span class="c-card__tag">Whitepaper</span>
-            <div class="c-card__wrapper">
-                <div class="c-card__primary">
-                    <header class="c-card__header u-flow--2xs">
-                        <p class="c-card__meta">
-                            <span>12 Jan 2015</span>
-                            <span>English</span>
-                        </p>
-                        <h2 class="c-h c-card__title">
-                            <a href="#">Accelerating the deformulation workflow for oral solid dosage forms</a>
-                        </h2>
-                    </header>
-                    <div class="c-card__content u-flow">
-                        <div class="mp o-prose u-flow--prose u-step--1">
-                            <p>This whitepaper on Oral Solid Dose (OSD) deformulation demonstrates how the analytical technique of Morphologically Directed Raman Spectroscopy (MDRS) can be used to accelerate the development of generic products to a successful conclusion.</p>
-                        </div>
-                        <div class="c-card__specs">
-                            <dl>
-                                <dt>Products:</dt>
-                                <dd>Morphologi G3-ID</dd>
-                            </dl>
-                        </div>
-                    </div>
-                    <footer class="c-card__footer u-flow--2xs">
-                        <div>
-                            <a href="#" class="mp c-twi u-link c-twi--left"><span>Read the whitepaper</span>
-                                <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
-                                    <use xlink:href="/static/svg/sprite.svg#arrow-right"></use>
-                                </svg>
-                            </a>
-                        </div>
-                    </footer>
-                </div>
-                <a class="u-fill u-fill--link" href="#">Accelerating the deformulation workflow for oral solid dosage forms</a>
-            </div>
-        </article>
-    </div>
-</div>
-
-<div class="c-slat u-wrap">
-    <div class="o-grid o-grid--8/4">
-
-        <article class="mp c-card c-card--layout-multi c-card--size-large c-card--bordered c-card--has-image">
-        <div class="c-card__wrapper">
-                <figure class="c-card__image">
-                    <a href="#">
-                    <img src="/static/img/range-product-1.jpg" alt="Product image alt">
-                    </a>
-                </figure>
-                <div class="c-card__primary">
-                    <header class="c-card__header u-flow--2xs">
-                        <h2 class="c-h c-card__title"><a href="#">Product name</a></h2>
-                        <h3 class="c-h c-h--tagline">Summary</h3>
-                    </header>
-                    <div class="c-card__content u-flow">
-                        <div class="mp o-prose u-flow--prose u-step--1">
-                            <p>Description lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                        </div>
-                    </div>
-                    <footer class="c-card__footer u-flow--2xs">
-                        <div>
-                            <a href="#" class="mp c-button c-button--inline c-button--green">Purchase</a>
-                        </div>
-                    </footer>
-                </div>
-                <a class="u-fill u-fill--link" href="#">Product name</a>
-            </div>
-        </article>
-
-        <article class="mp c-card c-card--layout-single c-card--size-large c-card--featured c-card--inline-specs c-card--has-tag c-card--has-image">
-            <span class="c-card__tag">Live webinar</span>
-            <div class="c-card__wrapper">
-                <figure class="c-card__image">
-                    <a href="#"><img src="/static/img/featured-event-1.jpg" alt="Alt"></a>
-                </figure>
-                <div class="c-card__primary">
-                    <header class="c-card__header u-flow--2xs">
-                        <time class="c-card__datetime">
-                            <span class="c-card__day">18 </span>
-                            <span class="c-card__month">Nov</span>
-                        </time>
-                        <p class="c-card__meta">
-                            <span>11:00 – 12:00 EST</span>
-                            <span>English</span>
-                        </p>
-                        <h2 class="c-h c-card__title">
-                            <a href="#">Discover how on-line particle sizing optimises mining analytics.</a>
-                        </h2>
-                    </header>
-                    <div class="c-card__content u-flow">
-                        <div class="c-card__specs">
-                            <dl>
-                                <dt>Products:</dt>
-                                <dd>Morphologi G3-ID</dd>
-                            </dl>
-                            <dl>
-                                <dt>Technologies:</dt>
-                                <dd>Morphologically-Directed Raman Spectroscopy</dd>
-                            </dl>
-                        </div>
-                    </div>
-                    <footer class="c-card__footer u-flow--2xs">
-                        <div>
-                            <a href="#" class="mp c-button c-button--inline c-button--green">Book your place</a>
-                        </div>
-                    </footer>
-                </div>
-                <a class="u-fill u-fill--link" href="#">Discover how on-line particle sizing optimises mining analytics.</a>
-            </div>
-        </article>
-
-    </div>
-</div>
-
-{% endblock %}

package/src/prototype/creating-a-page.njk

@@ -1,74 +0,0 @@
----
-title: Creating a prototype page
-layout: content-page
-sidebar: components
----
-
-{% from "components/prose/macro.njk" import markdown %}
-{% from "components/alert/macro.njk" import alert %}
-
-{% set content %}
-The best way to test components is in-situ with other components. Use these prototype pages as a way to validate your design ideas and see how your code reacts alongside other components.
-
-These prototype pages can also be used for user-testing, a qualitative way of observing how your customers react to your design without building the full production infrastructure of a new section. Here are the steps involved to create a new page.
-
-1. Create a new `.njk` file in `src/prototype` - the name corresponds to the url path. This file can be nested in a sub-folders to create depth.
-2. Add front-matter, a [YAML](https://yaml.org/) notation for any page variables:
-```yaml
----
-title: Page title
-tags: prototype
----
-```
-
-{{ alert({
-  content: '<p><strong>Note</strong>, the <code>tags</code> parameter must be set as "prototype" to surface the new page in the ' + config.name + ' sidebar.</p>'
-}) }}
-
-3. Set the page navigation. Along with the global navigation, different sections of the site use different site navigation, ie. Blog, Store. We can specify which navigation to load in the following way:
-
-```html
-{% brace 'silent' %} set siteNav {% endbrace %}{% brace 'silent' %} include "navigation/corporate.njk" {% endbrace %}{% brace 'silent' %} endset {% endbrace %}
-```
-
-This corresponds to the navigation files in `src/_includes/navigation`.
-
-4. Extend the `page.njk` layout: 
-
-```html
-{% brace 'silent' %} extends "page.njk" {% endbrace %}
-```
-
-5. Finally, add your content within the `content` block:
-
-```html
-{% brace 'silent' %} block content {% endbrace %}
-  <div>
-    <h1 class="c-h c-h--page-title">{% brace %} title {% endbrace %}</h1>
-  </div>
-{% brace 'silent' %} endblock {% endbrace %}
-```
-
-## All together now
-
-```html
----
-title: Page title
-tags: prototype
----
-
-{% brace 'silent' %} set siteNav {% endbrace %}{% brace 'silent' %} include "navigation/corporate.njk" {% endbrace %}{% brace 'silent' %} endset {% endbrace %}
-
-{% brace 'silent' %} extends "page.njk" {% endbrace %}
-
-{% brace 'silent' %} block content {% endbrace %}
-  <div>
-    <h1 class="c-h c-h--page-title">{% brace %} title {% endbrace %}</h1>
-  </div>
-{% brace 'silent' %} endblock {% endbrace %}
-```
-{% endset %}
-
-{{ markdown({
-  content: content
-}) }}