epfl-elements 4.5.1 → 4.6.1

package/dist/components/atoms/video/video.yml

@@ -1,8 +1,8 @@
 title: Video
 name: video
 notes : |
-  This is an example of **YouTube** integration but basically, **you can use any king of `<iframe>` URLs** until you keep the wrapper and the classes applied.
-  If you have another type of aspect ration, you can use the corresponding modifier classes:
+  This is an example of **YouTube** integration but basically, **you can use any kind of `<iframe>` URLs** until you keep the wrapper and the classes applied.
+  If you have another type of aspect ratio, you can use the corresponding modifier classes:
     - `.embed-responsive-21by9`
     - `.embed-responsive-16by9`
     - `.embed-responsive-4by3`

package/dist/components/molecules/carousel/carousel.yml

@@ -1,7 +1,7 @@
 name: carousel
 title: Carousel
 notes: |
-  Basic carousel using Bootstrap functionality: https://getbootstrap.com/docs/4.0/components/carousel/.
+  Basic carousel using Bootstrap functionality: https://getbootstrap.com/docs/4.6/components/carousel/.
 
   Use the 'data-interval' attribute to change the automatic slide delay.
 

package/dist/components/molecules/collapse-group/collapse-group-rich-content.twig

@@ -29,9 +29,9 @@
     </div>
     <div class="col-md-5">
       <a href="tel:+41 21 666 77 88" class="btn btn-sm btn-secondary mb-2">+41 21 666 77 88</a><br/>
-      {% include "@atoms/icon/icon.twig" %} <a href="#">Website</a><br/>
-      {% include "@atoms/icon/icon.twig" %} <a href="#">Directory</a><br/>
-      {% include "@atoms/icon/icon.twig" %} <a href="#">CE 3 316</a>
+      {% include "@atoms/icon/icon.twig" with { icon: 'home', icon_classes:'feather' } %} <a href="#">Website</a><br/>
+      {% include "@atoms/icon/icon.twig" with { icon: 'book', icon_classes:'feather' } %} <a href="#">Directory</a><br/>
+      {% include "@atoms/icon/icon.twig" with { icon: 'map-pin', icon_classes:'feather' } %} <a href="#">CE 3 316</a>
     </div>
   </div>
 
@@ -62,9 +62,9 @@
     </div>
     <div class="col-md-5">
       <a href="tel:+41 21 666 77 88" class="btn btn-sm btn-secondary mb-2">+41 21 666 77 88</a><br/>
-      {% include "@atoms/icon/icon.twig" %} <a href="#">Website</a><br/>
-      {% include "@atoms/icon/icon.twig" %} <a href="#">Directory</a><br/>
-      {% include "@atoms/icon/icon.twig" %} <a href="#">CE 3 316</a>
+      {% include "@atoms/icon/icon.twig" with { icon: 'home', icon_classes:'feather' } %} <a href="#">Website</a><br/>
+      {% include "@atoms/icon/icon.twig" with { icon: 'book', icon_classes:'feather' } %} <a href="#">Directory</a><br/>
+      {% include "@atoms/icon/icon.twig" with { icon: 'map-pin', icon_classes:'feather' } %} <a href="#">CE 3 316</a>
     </div>
   </div>
 </div>
@@ -94,9 +94,9 @@
     </div>
     <div class="col-md-5">
       <a href="tel:+41 21 666 77 88" class="btn btn-sm btn-secondary mb-2">+41 21 666 77 88</a><br/>
-      {% include "@atoms/icon/icon.twig" %} <a href="#">Website</a><br/>
-      {% include "@atoms/icon/icon.twig" %} <a href="#">Directory</a><br/>
-      {% include "@atoms/icon/icon.twig" %} <a href="#">CE 3 316</a>
+      {% include "@atoms/icon/icon.twig" with { icon: 'home', icon_classes:'feather' } %} <a href="#">Website</a><br/>
+      {% include "@atoms/icon/icon.twig" with { icon: 'book', icon_classes:'feather' } %} <a href="#">Directory</a><br/>
+      {% include "@atoms/icon/icon.twig" with { icon: 'map-pin', icon_classes:'feather' } %} <a href="#">CE 3 316</a>
     </div>
   </div>
 </div>

package/dist/components/molecules/filters/filters.yml

@@ -2,7 +2,7 @@ name: filters
 title: Filters
 notes: |
   The filters are displayed (in a sidebar) on desktop but have to be collapsed in on mobile.
-  variants:
+variants:
   - name: blog
     title: Blog content filters
     notes: |

package/dist/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">
 

package/dist/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>

package/dist/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

package/dist/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>

package/dist/components/organisms/headlines/headlines.yml

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

package/dist/components/organisms/modal/modal.yml

@@ -3,4 +3,4 @@ name: modal
 notes: |
   The **Bootstrap Modal component** is a dialog box/popup window that is displayed on top of the current page.
 
-  For usage, [see Bootstrap documentation](https://getbootstrap.com/docs/4.0/components/modal/).
+  For usage, [see Bootstrap documentation](https://getbootstrap.com/docs/4.6/components/modal/).

package/dist/components/pages/layout-demo/layout-demo.twig

@@ -18,7 +18,7 @@
   <div class="container">
     <div class="alert alert-success">
       <h4>container</h4>
-      <p>This <strong>.container</strong> class is the bootstrap defaut one. When used, It will fallback to the default bootstrap behavior, that can be divided with rows, columns, etc... (see <a href="https://getbootstrap.com/docs/4.1/layout/grid/">the Bootstrap documentation)</a></p>
+      <p>This <strong>.container</strong> class is the bootstrap defaut one. When used, It will fallback to the default bootstrap behavior, that can be divided with rows, columns, etc... (see <a href="https://getbootstrap.com/docs/4.6/layout/grid/">the Bootstrap documentation)</a></p>
     </div>
   </div>
 {% endblock %}