@madgex/design-system 14.3.0 → 14.4.0

package/src/typography/font-types.njk

@@ -1,43 +0,0 @@
-{# Comments from https://utopia.fyi/type/calculator?c=320,16,1.067,1240,16,1.125,9,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 #}
-{% set fontSizesDoc = {
-  's-2': '12px',
-  's-1': '14px',
-  's0': '16px',
-  's1': '17.072px → 18px', 
-  's2': '18.2158px → 20.25px',
-  's3': '19.4363px → 22.7813px',
-  's4': '20.7385px → 25.6289px',
-  's5': '22.128px → 28.8325px',
-  's6': '23.6106px → 32.4366px',
-  's7': '25.1925px → 36.4912px',
-  's8': '26.8804px → 41.0526px',
-  's9': '28.6814px → 46.1841px'
-} %}
-
-<style>
-  .breakpoint-indicator { display: flex; width: 100%; position: sticky; top: 0; background: white; }
-  .example-copy { background-color: #f8f8f8; }
-  .example-copy:hover { background-color: #ececec; }
-</style>
-
-{% for fontName, item in tokens.font.type %}
-  <div class="mds-margin-bottom-b10">
-    <h2 class="mds-margin-bottom-b5"><strong>{{ fontName }}</strong></h2>
-    <ul>
-      <li>Size (in px): <strong>{{ fontSizesDoc[fontName] }}</strong> <span class="mds-font-s-1">(Viewport width: min 320px → max 1240px)</span></li>
-      <li>Line height: <strong>{{ item['line-height'].value }}</strong></li>
-    </ul>
-    <p class="mds-margin-bottom-b1" style="font-size: 16px;">Example:</p>
-    <div class="example-copy mds-highlighted-container" style="margin-bottom: 80px;">
-      <div class="mds-font-{{ fontName }}">
-        <p>
-          The quick brown fox jumps over the lazy dog
-        </p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend accumsan elementum. Praesent quis facilisis elit. Donec vel suscipit leo. Cras tincidunt lacus sed mauris fringilla sodales. Praesent quis facilisis elit. Donec vel suscipit leo. Cras tincidunt lacus sed mauris fringilla sodales.</p>
-      </div>
-    </div>
-
-    <hr style="border: 1px solid #eee; height: 0; margin-bottom: 80px;">
-
-  </div>
-{% endfor %}

package/src/typography/headings.njk

@@ -1,9 +0,0 @@
-<h1>The quick brown fox jumps over the lazy dog</h1>
-
-<h1><a>The quick brown link jumps over the lazy link</a></h1>
-
-<h2>The quick brown fox jumps over the lazy dog</h2>
-
-<h3>The quick brown fox jumps over the lazy dog</h3>
-
-<h4>The quick brown fox jumps over the lazy dog</h4>

package/src/typography/lists.njk

@@ -1,111 +0,0 @@
-<h2>Unordered list</h2>
-<ul class="mds-list mds-list--bullet">
-  <li class="mds-list__item">
-    <a href="#one">one</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">two</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#three">three</a>
-  </li>
-</ul>
-<h2>Ordered list</h2>
-<ol class="mds-list mds-list--number">
-  <li class="mds-list__item">one</li>
-  <li class="mds-list__item">two</li>
-  <li class="mds-list__item">three</li>
-</ol>
-<h2>Definition List with border</h2>
-<dl class="mds-list mds-list--definition mds-list--border">
-  <dt class="mds-list__key">Recruiter</dt>
-  <dd class="mds-list__value">The National Aeronautics and Space Association</dd>
-  <dt class="mds-list__key">Reference</dt>
-  <dd class="mds-list__value">98798HWV74IU3G</dd>
-  <dt class="mds-list__key">Expires</dt>
-  <dd class="mds-list__value">12pm, 25th November 1983</dd>
-</dl>
-<h2>Inline list</h2>
-<ul class="mds-list mds-list--inline">
-  <li class="mds-list__item">One</li>
-  <li class="mds-list__item">Two</li>
-  <li class="mds-list__item">Three</li>
-</ul>
-<h2>Bordered inline list (separated)</h2>
-<ul class="mds-list mds-list--inline mds-list--pipe">
-  <li class="mds-list__item">Four</li>
-  <li class="mds-list__item">Five</li>
-  <li class="mds-list__item">Six</li>
-</ul>
-<h2>Multilevel list</h2>
-<ol class="mds-list mds-list--number mds-list--multilevel">
-  <li class="mds-list__item">
-    one
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">two</a>
-  </li>
-  <li class="mds-list__item">three
-    <ul class="mds-list mds-list--bullet">
-      <li class="mds-list__item">first</li>
-      <li class="mds-list__item">second</li>
-      <li class="mds-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget metus nisi. Morbi
-        sollicitudin, erat sed elementum suscipit, dolor nibh sagittis dui, at ultrices massa erat non ipsum. Nam euismod
-        dapibus augue, sit amet efficitur urna malesuada vitae. Sed tincidunt felis a turpis vulputate, vitae sodales nibh
-        imperdiet. Donec ullamcorper risus quis convallis mollis. Nullam nec magna lectus. Etiam in lobortis purus. Duis
-        vestibulum, nibh sit amet commodo porttitor, nunc metus eleifend magna, at venenatis tortor justo at eros. Vivamus eu
-        tincidunt mi, vel fermentum tortor. Aenean tempus, magna a scelerisque consequat, libero tortor porttitor neque, nec
-        aliquam lorem purus sodales diam. Pellentesque a orci vitae orci fringilla sollicitudin quis vitae leo.
-        <ul class="mds-list mds-list--bullet">
-          <li class="mds-list__item">once</li>
-          <li class="mds-list__item">twice</li>
-        </ul>
-      </li>
-    </ul>
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">four</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">five</a>
-  </li>
-</ol>
-<h2>List with no indent</h2>
-<ul class="mds-list mds-list--bullet mds-list--noindent">
-  <li class="mds-list__item">
-    <a href="#one">one</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">two</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#three">three</a>
-  </li>
-</ul>
-<h2>Step List</h2>
-<ol class="mds-step-list">
-  <li class="mds-step-list__item">Step 1</li>
-  <li class="mds-step-list__item">Step 2</li>
-  <li class="mds-step-list__item">Step 3</li>
-</ol>
-<h2>Step List with page progress</h2>
-<ol class="mds-step-list">
-  <li class="mds-step-list__item">
-    <a href="https://www.google.com">Past page with link</a>
-  </li>
-  <li class="mds-step-list__item mds-step-list__item--current mds-step-list__item--has-subnav" aria-current="page">Current
-    page
-    <ul class="mds-step-list-subnav">
-      <li class="mds-step-list-subnav__item">
-        <a class="mds-step-list-subnav__link" href="#section-1">Section 1</a>
-      </li>
-      <li class="mds-step-list-subnav__item">
-        <a class="mds-step-list-subnav__link" href="#section-2" aria-current="location">Section 2</a>
-      </li>
-      <li class="mds-step-list-subnav__item">
-        <a class="mds-step-list-subnav__link" href="#section-3">Section 3</a>
-      </li>
-    </ul>
-  </li>
-  <li class="mds-step-list__item mds-step-list__item--future">Ghost of pages future</li>
-</ol>