Styleguide/popover fullwidth teaser (#696)

Use variants for fullwidth teaser and headlines with image legend.

assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig

@@ -2,7 +2,16 @@
 
 <div class="fullwidth-teaser fullwidth-teaser-horizontal{% if thinner_teaser %} thinner-teaser{% endif %}">
 
+  {% if has_image_legend|default(false) %}
+  <figure class="cover">
+    {% include '@atoms/picture/picture-fullwidth-teaser.twig' %}
+    <figcaption>
+        {% include '@atoms/popover/popover.twig' %}
+    </figcaption>
+  </figure>
+  {% else %}
   {% include '@atoms/picture/picture-fullwidth-teaser.twig' %}
+  {% endif %}
 
   <div class="fullwidth-teaser-text">
 

assets/components/organisms/fullwidth-teaser/fullwidth-teaser-legend.twig

@@ -0,0 +1,38 @@
+<div class="fullwidth-teaser">
+
+  <figure class="cover">
+    {% include '@atoms/picture/picture-fullwidth-teaser.twig' %}
+    <figcaption>
+      {% include '@atoms/popover/popover.twig' %}
+    </figcaption>
+  </figure>
+
+  <div class="fullwidth-teaser-text">
+
+    <div class="fullwidth-teaser-header">
+      <div class="fullwidth-teaser-title">
+        <h3>
+          {% if not title %}{% set title %}Évaluer la durabilité dans le domaine spatial{% endset %}{% endif %}
+          {{title}}
+        </h3>
+      </div>
+      <a href="#" aria-label="En savoir plus sur {{title}}" class="btn btn-primary triangle-outer-bottom-right d-none d-xl-block">
+        En savoir plus
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-right'} %}
+      </a>
+    </div>
+
+    <div class="fullwidth-teaser-content">
+      <p>
+        {% if not content %}
+        {% set content %}Le nouveau Space Sustainability Rating accueilli par eSpace, le centre spatial de l’EPFL, encourage le secteur de l’espace à concevoir et à mettre en œuvre des missions spatiales durables et responsables — montrant ainsi la voie pour assurer à long terme une approche durable de l’environnement spatial.{% endset %}
+        {% endif %}
+        {{content}}
+      </p>
+    </div>
+
+    <div class="fullwidth-teaser-footer">
+      <a href="#" aria-label="En savoir plus sur Tech Transfer" class="btn btn-primary btn-block d-xl-none">En savoir plus</a>
+    </div>
+  </div>
+</div>

assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss

@@ -27,10 +27,17 @@
     width: 100%;
     height: auto;
   }
-  figure{
+  figure,
+  figure picture,
+  figure img {
     margin-bottom: 0;
   }
 
+  figure picture,
+  figure img {
+    height: 100%;
+  }
+
   picture,
   figure,
   .fullwidth-teaser-text {
@@ -184,11 +191,11 @@
         border-top-color: color.adjust($red, $lightness: -15%);
       }
     }
-    
+
     &:active:after {
       border-top-color: color.adjust($red-dark, $lightness: -10%);
     }
-    
+
     &:focus {
       outline: 0 !important;
     }

assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml

@@ -1,6 +1,12 @@
 title: Fullwidth teaser
 name: fullwidth-teaser
 variants:
+  - name: legend
+    title: Fullwidth teaser with image legend
+    notes:  |
+      The [popover](#/atoms/popover) component can be used on any Fullwidth teaser variant in order to add a legend to the image.
+
+      The markup structure is similar to the [cover](#/molecules/cover) component.
   - name: horizontal
     title: Horizontal
   - name: left

assets/components/organisms/headlines/headlines-legend.twig

@@ -0,0 +1,44 @@
+{% macro card_link(card) %}
+  <a href="#" class="card link-trapeze-horizontal">
+    <div class="card-body">
+      <h3 class="card-title">{{ card.title }}</h3>
+      <div class="card-info">
+        {% if card.date %}
+          <span class="card-info-date">
+            <time datetime="DATETIME HERE">{{ card.date }}</time>
+          </span>
+        {% endif %}
+        {% for item in card.info %}
+          <span>{{ item }}</span>
+        {% endfor %}
+      </div>
+      <p>{{ card.content }}</p>
+    </div>
+  </a>
+{% endmacro %}
+{% import _self as macros %}
+
+{% set bottomlink = bottomlink|default(true) %}
+
+{# The intro fullwidth teaser #}
+{% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' with { has_image_legend: true } %}
+
+{# First teasers #}
+<div class="container pb-5 offset-xl-top pt-5 pt-xl-0">
+  <div class="row">
+    <div class="col-lg-10 offset-lg-1">
+      <div class="row mb-4">
+        {% for card in homepage.section_one.cards %}
+          <div class="col-md-6 d-flex">
+            {{ macros.card_link(card) }}
+          </div>
+        {% endfor %}
+      </div>
+      {% if bottomlink %}
+        <p class="text-center">
+          <a href="#">{{ homepage.section_one.readmore }}</a>
+        </p>
+      {% endif %}
+    </div>
+  </div>
+</div>

assets/components/organisms/headlines/headlines.yml

@@ -1,2 +1,5 @@
 title: Headlines
 name: headlines
+variants:
+- name: legend
+  title: Headlines with image legend