From ce9f85c365adc58bbc4f14c61dbcbe3c912a3b87 Mon Sep 17 00:00:00 2001
From: Aline Keller <aline.keller@gmail.com>
Date: Thu, 30 Nov 2023 10:41:52 +0100
Subject: [PATCH] Styleguide/popover fullwidth teaser (#696)

Use variants for fullwidth teaser and headlines with image legend.
---
 .../fullwidth-teaser-horizontal.twig          |  9 ++++
 .../fullwidth-teaser-legend.twig              | 38 ++++++++++++++++
 .../fullwidth-teaser/fullwidth-teaser.scss    | 13 ++++--
 .../fullwidth-teaser/fullwidth-teaser.yml     |  6 +++
 .../organisms/headlines/headlines-legend.twig | 44 +++++++++++++++++++
 .../organisms/headlines/headlines.yml         |  3 ++
 6 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 assets/components/organisms/fullwidth-teaser/fullwidth-teaser-legend.twig
 create mode 100644 assets/components/organisms/headlines/headlines-legend.twig

diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig
index 946390085..8b9c68bd6 100644
--- a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig
+++ b/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">
 
diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-legend.twig b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-legend.twig
new file mode 100644
index 000000000..6b5d53bab
--- /dev/null
+++ b/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>
diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss
index f07fb7029..2906a4618 100644
--- a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss
+++ b/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;
     }
diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml
index 655131d04..a155f769b 100644
--- a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml
+++ b/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
diff --git a/assets/components/organisms/headlines/headlines-legend.twig b/assets/components/organisms/headlines/headlines-legend.twig
new file mode 100644
index 000000000..80ad89aeb
--- /dev/null
+++ b/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>
diff --git a/assets/components/organisms/headlines/headlines.yml b/assets/components/organisms/headlines/headlines.yml
index 8aae5de2d..a920f0d6c 100644
--- a/assets/components/organisms/headlines/headlines.yml
+++ b/assets/components/organisms/headlines/headlines.yml
@@ -1,2 +1,5 @@
 title: Headlines
 name: headlines
+variants:
+- name: legend
+  title: Headlines with image legend