Ajout d'un teaser avec une icône pour les news qui ont une vidéo (#706)

assets/components/atoms/picture/picture-news-thumb.twig

@@ -1,3 +1,13 @@
+{% if light_image %}
+<picture>
+  <source media="(min-width: 1140px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-190x107.jpg 2x">
+  <source media="(min-width: 960px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-190x107.jpg 2x">
+  <source media="(min-width: 720px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-80x45.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-160x90.jpg 2x">
+  <source media="(min-width: 541px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-120x68.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-240x135.jpg 2x">
+  <source media="(max-width: 540px)" srcset="./images/styleguide/news-thumbs/news_thumb_02-540x304.jpg 1x, ./images/styleguide/news-thumbs/news_thumb_02-1080x608.jpg 2x">
+  <img src="./images/styleguide/news-thumbs/news_thumb_02-95x53.jpg" class="img-fluid" alt="ALT">
+</picture>
+{% else %}
 <picture>
   <source media="(min-width: 1140px)" srcset="./images/styleguide/news-thumbs/news_thumb-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-190x107.jpg 2x">
   <source media="(min-width: 960px)" srcset="./images/styleguide/news-thumbs/news_thumb-95x53.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-190x107.jpg 2x">
@@ -6,3 +16,4 @@
   <source media="(max-width: 540px)" srcset="./images/styleguide/news-thumbs/news_thumb-540x304.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-1080x608.jpg 2x">
   <img src="./images/styleguide/news-thumbs/news_thumb-95x53.jpg" class="img-fluid" alt="ALT">
 </picture>
+{% endif %}

assets/components/molecules/list-group/list-group-teasers.twig

@@ -1,5 +1,5 @@
 <div class="list-group">
-  {% for i in 1..4 %}
+  {% for i in 1..2 %}
 
       <div class="list-group-teaser list-group-item list-group-teaser-container">
         <div class="list-group-teaser-thumbnail">
@@ -18,6 +18,40 @@
       </div>
   {% endfor %}
 
+  <div class="list-group-teaser list-group-item list-group-teaser-container">
+    <div class="list-group-teaser-thumbnail">
+      <a href="#" class="link-trapeze-horizontal">
+        {% include '@atoms/picture/picture-news-thumb.twig' %}
+        <div class="news-video-overlay"></div>
+      </a>
+    </div>
+    <div class="list-group-teaser-content">
+      <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+      <p>
+        <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+        <span class="text-muted">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+          Epicureum esse, si probarem, quae ille diceret?</span>
+      </p>
+    </div>
+  </div>
+
+  <div class="list-group-teaser list-group-item list-group-teaser-container">
+    <div class="list-group-teaser-thumbnail">
+      <a href="#" class="link-trapeze-horizontal">
+        {% include '@atoms/picture/picture-news-thumb.twig' with { light_image: true } %}
+        <div class="news-video-overlay"></div>
+      </a>
+    </div>
+    <div class="list-group-teaser-content">
+      <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+      <p>
+        <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+        <span class="text-muted">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+          Epicureum esse, si probarem, quae ille diceret?</span>
+      </p>
+    </div>
+  </div>
+
   <div class="list-group-teaser list-group-item list-group-teaser-container teaser-img-right">
     <div class="list-group-teaser-thumbnail">
       <a href="#" class="link-trapeze-horizontal">

assets/components/molecules/list-group/list-group.scss

@@ -192,3 +192,25 @@
 
   }
 }
+
+.list-group-teaser-thumbnail .news-video-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+
+  &:before {
+    content: "";
+    width: 2.25rem;
+    height: 2.25rem;
+    background: url(../images/icons/icon-teaser-video.svg);
+    background-size: 100%;
+    border-radius: 50%;
+    box-shadow: 0 0 1rem rgba(0,0,0,0.16);
+  }
+}