@madgex/design-system 1.69.0 → 1.70.0

package/src/typography/font-types.njk

@@ -1,22 +1,63 @@
-{% for fontName, item in tokens.font.type %}
-<div class="mds-margin-bottom-b5">
-  <h2><strong>{{ fontName | capitalize }}:</strong></h2>
-  {% for viewport, subItem in item %}
-    <ul>
-    <strong>{{ viewport }}</strong>
-    {% for cssProperty, subSubItem in subItem %}
-      <li>{{ cssProperty }}: {{subSubItem.value}}</li>
-    {% endfor %}
-  </ul>
-  {% endfor %}
-  <p><strong>Example: </strong></p>
-  <p class="mds-font-{{ fontName }}">
-  {%- if fontName == 'body-copy-bulk' -%}
-    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. Donec facilisis suscipit augue, id pharetra nisl pharetra vitae. Etiam sed est id nulla ultricies accumsan sit amet ac urna. Etiam a neque eu erat rhoncus sollicitudin. Aenean maximus, mauris vitae porttitor varius, metus massa porttitor nulla, ac iaculis turpis tellus quis dui. Maecenas pharetra a ligula sed imperdiet.
-  {%- else -%}
-    The quick brown fox jumps over the lazy dog
+{# get breakpoint names as array #}
+{% set bps = ['default'] %}
+{% for name, item in tokens.size.breakpoint %}
+  {% set bps = bps.concat(name) %}
+{% endfor %}
+
+<style>
+  .example-copy { background-color: #f8f8f8; }
+  .example-copy:hover { background-color: #ececec; }
+
+{% for bpname in bps %}
+  {%- set nextbpname = bps[loop.index0 + 1] -%}
+
+  {%- set lower = tokens.size.breakpoint[bpname] -%}
+  {%- if lower -%}
+    {%- set lower = (tokens.size.breakpoint[bpname].original.value).split('px')[0] -%}
   {%- endif -%}
-  </p>
-  <hr>
-</div>
+
+  {%- set upper = tokens.size.breakpoint[nextbpname] -%}
+  {%- if upper -%}
+    {%- set upper = (tokens.size.breakpoint[nextbpname].original.value).split('px')[0]-1 -%}
+  {%- endif %}
+
+  @media {% if lower -%}(min-width: {{ lower }}px){%- endif -%}{% if lower and upper %} and {% endif %}{% if upper -%}(max-width: {{ upper }}px){%- endif -%} {
+    .rwd-{{ bpname }} { background: #fffdac; }
+  }
+
+{% endfor -%}
+</style>
+
+{% for fontName, item in tokens.font.type %}
+  <div class="mds-margin-bottom-b10">
+    <h2 class="mds-margin-bottom-b5"><strong>{{ fontName | capitalize }}</strong></h2>
+    
+    <p class="mds-margin-bottom-b1" style="font-size: 16px;">Breakpoint sizes:</p>
+    <div class="mds-margin-bottom-b10" style="display: flex; width: 100%;">
+      {%- for bpname in bps -%}
+        <div class="mds-padding-b2 rwd-{{ bpname }}" style="flex: 1; border: 1px solid #eee;">
+          <strong>{{ bpname }}</strong>
+          {% set selectedFont = tokens.font.type[fontName][bpname] %}
+          <ul class="mds-margin-b0">
+            {% for cssProperty, subSubItem in selectedFont %}
+              <li>{{ cssProperty }}: {{subSubItem.value}}</li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endfor %}
+    </div>
+
+    <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 %}