Merge branch '3.1.x' into prod/3.1.x

.gitignore

@@ -6,3 +6,4 @@ gesso/
 css/
 js/
 source/_patterns/00-config/_design-tokens.artifact.scss
+source/_data/design-tokens.artifact.yml

source/_patterns/03-layouts/header/header.twig

@@ -30,6 +30,7 @@
       <div class="uw-header__site-name">
         {% include '@components/site-name/site-name.twig' with {
           'site_name': site_name,
+          'subtitle': subtitle,
           'home_link': home_link
         } %}
       </div>

source/_patterns/04-components/facts-and-figures/_facts-and-figures.scss

@@ -580,6 +580,12 @@ are the same height. */
         font-size:rem(gesso-font-size(-1));
         line-height: 1.2;
       }
+      em, i {
+        font-style: normal;
+      }
+      strong, b {
+        font-weight: bold;
+      }
     }
   }
   &--no-carousel{

source/_patterns/04-components/facts-and-figures/facts-and-figures.twig

@@ -16,6 +16,12 @@
                   <div class="uw-ff--text uw-ff--text__{{ detail.type }}">
                     <img src="{{ detail.icon }}" />
                   </div>
+                {% elseif detail.type == 'caption' %}
+                  {% if detail.caption %}
+                    <span class="uw-ff--text uw-ff--text__caption">
+                      {{ detail.caption }}
+                  </span>
+                  {% endif %}
                 {% else %}
                   <span class="uw-ff--text uw-ff--text__{{ detail.type }}">{{ detail.text }}</span>
                 {% endif %}
@@ -38,6 +44,12 @@
             <div class="uw-ff--text uw-ff--text__{{ detail.type }}">
               <img src="{{ detail.icon }}" />
             </div>
+          {% elseif detail.type == 'caption' %}
+            {% if detail.caption %}
+              <span class="uw-ff--text uw-ff--text__caption">
+                {{ detail.caption }}
+              </span>
+            {% endif %}
           {% else %}
             <span class="uw-ff--text uw-ff--text__{{ detail.type }}">{{ detail.text }}</span>
           {% endif %}

source/_patterns/04-components/facts-and-figures/facts-and-figures.yml

@@ -19,6 +19,9 @@ ffs:
       -
         text: 'Small #1'
         type: 'small'
+      -
+        caption: '<p>This <strong>would be</strong> caption</p>'
+        type: 'caption'
     -
       - type: 'infographics'
         infographics:
@@ -65,3 +68,6 @@ ffs:
       -
         text: 'Small #1'
         type: 'small'
+      -
+        caption: '<p>This would be caption</p>'
+        type: 'caption'

source/_patterns/04-components/site-name/_site-name.scss

@@ -3,7 +3,7 @@
 
 $site-name-font-family: gesso-grayscale(gray-2);
 $site-name-font-size: gesso-font-size(5);
-
+$site-slogan-font-size: gesso-font-size(2);
 .uw-site-name {
   a{
    &:hover{ text-decoration:underline;}
@@ -29,6 +29,17 @@ $site-name-font-size: gesso-font-size(5);
     font-size:$site-name-font-size;
     margin:0;
     padding:0.5rem 0;
+  }
+  &__subtitle {
+    display:block;
+    font-family: gesso-font-family(condensedbook);
+    font-size: gesso-font-size(0);
+    @include medium{
+      font-size: $site-slogan-font-size;
+    }
+
+    margin: 0;
+    padding:0 0 0.5rem;
 
   }
 }

source/_patterns/04-components/site-name/site-name.twig

@@ -2,6 +2,13 @@
   <div class="uw-site-name__wrapper">
     <a class="uw-site-name__link" href="{{ home_link }}" title="{{ site_name}} {{ 'Home'|t }}" rel="home">
       <h1 class="uw-site-name__text">{{ site_name }}</h1>
+
+      {% if subtitle %}
+        {% include '@components/site-slogan/site-slogan.twig' with {
+          'subtitle': subtitle,
+        } %}
+      {% endif %}
+
     </a>
   </div>
 </div>

source/_patterns/04-components/site-slogan/site-slogan.twig

-<span class="site-slogan">{{ site_slogan }}</span>
+<h2 class="uw-site-name__subtitle">{{ subtitle }}</h2>