epfl-elements 4.3.0 → 4.4.1

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

@@ -1,102 +0,0 @@
-{% if title is not defined %}{% set title = 'Further readings' %}{% endif %}
-{% if title %}
-<h4>{{title}}</h4>
-{% endif %}
-
-<button
-  class="collapse-title collapse-title-desktop"
-  type="button"
-  data-toggle="collapse"
-  data-target="#collapse-1"
-  aria-expanded="false"
-  aria-controls="collapse-1"
->
-  Teaching Staff Member at School Concil IC
-</button>
-
-<div class="collapse collapse-item show collapse-item-desktop" id="collapse-1">
-
-  <div class="row pt-3 pb-4">
-    <div class="col-md-7">
-      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
-        <strong itemprop="name">EPFL PRES</strong><br/>
-        <span itemprop="address">
-          CE 3 316 (Centre Est)<br/>
-          Station 1<br/>
-          CH-1015 Lausanne
-        </span>
-      </p>
-    </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>
-    </div>
-  </div>
-
-</div>
-
-<button
-  class="collapse-title collapse-title-desktop collapsed"
-  type="button"
-  data-toggle="collapse"
-  data-target="#collapse-2"
-  aria-expanded="false"
-  aria-controls="collapse-2"
->
-  Silent Spring
-</button>
-
-<div class="collapse collapse-item collapse-item-desktop" id="collapse-2">
-  <div class="row pt-3 pb-4">
-    <div class="col-md-7">
-      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
-        <strong itemprop="name">EPFL PRES</strong><br/>
-        <span itemprop="address">
-          CE 3 316 (Centre Est)<br/>
-          Station 1<br/>
-          CH-1015 Lausanne
-        </span>
-      </p>
-    </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>
-    </div>
-  </div>
-</div>
-
-<button
-  class="collapse-title collapse-title-desktop collapsed"
-  type="button"
-  data-toggle="collapse"
-  data-target="#collapse-3"
-  aria-expanded="false"
-  aria-controls="collapse-3"
->
-  The Hitchhiker's Guide to the Galaxy
-</button>
-
-<div class="collapse collapse-item collapse-item-desktop" id="collapse-3">
-  <div class="row pt-3 pb-4">
-    <div class="col-md-7">
-      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
-        <strong itemprop="name">EPFL PRES</strong><br/>
-        <span itemprop="address">
-          CE 3 316 (Centre Est)<br/>
-          Station 1<br/>
-          CH-1015 Lausanne
-        </span>
-      </p>
-    </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>
-    </div>
-  </div>
-</div>

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

@@ -1,49 +0,0 @@
-{% if title is not defined %}{% set title = 'Further readings' %}{% endif %}
-{% if title %}
-<h4>{{title}}</h4>
-{% endif %}
-
-<button
-  class="collapse-title collapse-title-desktop collapsed"
-  type="button"
-  data-toggle="collapse"
-  data-target="#collapse-1"
-  aria-expanded="false"
-  aria-controls="collapse-1"
->
-  On the Origin of Species
-</button>
-
-<div class="collapse collapse-item collapse-item-desktop" id="collapse-1">
-  <p>Book by Charles Darwin, 1859 — On the Origin of Species, published on 24 November 1859, is a work of scientific literature by Charles Darwin which is considered to be the foundation of evolutionary biology.</p>
-</div>
-
-<button
-  class="collapse-title collapse-title-desktop collapsed"
-  type="button"
-  data-toggle="collapse"
-  data-target="#collapse-2"
-  aria-expanded="false"
-  aria-controls="collapse-2"
->
-  Silent Spring
-</button>
-
-<div class="collapse collapse-item collapse-item-desktop" id="collapse-2">
-  <p>Book by Rachel Carson, 1962 — Silent Spring is an environmental science book by Rachel Carson. The book was published on 27 September 1962 and it documented the adverse effects on the environment of the indiscriminate use of pesticides.</p>
-</div>
-
-<button
-  class="collapse-title collapse-title-desktop collapsed"
-  type="button"
-  data-toggle="collapse"
-  data-target="#collapse-3"
-  aria-expanded="false"
-  aria-controls="collapse-3"
->
-  The Hitchhiker's Guide to the Galaxy
-</button>
-
-<div class="collapse collapse-item collapse-item-desktop" id="collapse-3">
-  <p>Book by Douglas Adams, 1978–80 — The Hitchhiker's Guide to the Galaxy (sometimes referred to as HG2G, HHGTTG or H2G2) is a comedy science fiction series created by Douglas Adams. Originally a radio comedy broadcast on BBC Radio 4 in 1978, it was later adapted to other formats, including stage shows, novels, comic books, a 1981 TV series, a 1984 video game, and 2005 feature film.</p>
-</div>

package/dist/components/molecules/collapse-group/collapse-group.yml

@@ -1,11 +0,0 @@
-title: Collapse group
-name: collapse-group
-variants:
-  - name: rich-content
-    title: Collapse with rich content
-  - name: people-contacts
-    title: Collapse with contact info
-    notes: |
-      Used in People pages
-notes: |
-  This version is **mobile-only by default**, as used in the mobile version of the footer component. For the desktop version: use the classes `collapse-title-desktop` and `collapse-item-desktop`. See example stack below.

package/dist/components/molecules/cover/cover.twig

@@ -1,6 +0,0 @@
-<figure class="cover">
-  {% include '@atoms/picture/picture-cover.twig' %}
-  <figcaption>
-    {% include '@atoms/popover/popover.twig' %}
-  </figcaption>
-</figure>

package/dist/components/molecules/cover/cover.yml

@@ -1,2 +0,0 @@
-title: Cover
-name: cover

package/dist/components/molecules/datepicker/datepicker-fancy.twig

@@ -1,5 +0,0 @@
-<div class="datepicker-wrapper">
-  <input type="text" class="datepicker-fancy">
-  <span class="nextMonthLabel"></span>
-  <span class="prevMonthLabel"></span>
-</div>

package/dist/components/molecules/datepicker/datepicker.twig

@@ -1,3 +0,0 @@
-<div class="datepicker-wrapper">
-  <input type="text" class="datepicker">
-</div>

package/dist/components/molecules/datepicker/datepicker.yml

@@ -1,7 +0,0 @@
-title: Datepicker
-name: datepicker
-variants:
-  - name: fancy
-    title: Datepicker fancy
-    notes: |
-      Offers big months on desktop and a single line view on mobile.

package/dist/components/molecules/filters/filters-blog.twig

@@ -1,48 +0,0 @@
-<aside>
-  <div class="d-flex justify-content-between px-3 p-md-0 align-baseline">
-    <h3 class="h5 mb-0 font-weight-normal">Filtrer les articles</h3>
-    <button
-      class="btn btn-sm btn-secondary d-lg-none collapsed collapse-drop-toggle"
-      type="button"
-      data-toggle="collapse"
-      data-target="#form-filters"
-      aria-expanded="false"
-      aria-controls="form-filters"
-    >
-      Filtres
-      {% include '@atoms/icon/icon.twig' with {'icon': 'icon-triangle'} %}
-    </button>
-  </div>
-  <div class="collapse collapse-lg-show collapse-drop" id="form-filters">
-    <form class="p-3 p-lg-0 mt-md-3">
-
-      <div class="form-group">
-        <div class="form-group">
-          <label>Catégories</label>
-          <select id="select-input" class="custom-select">
-            <option selected>Toutes les catégories</option>
-            <option value="1">Catégorie 1</option>
-            <option value="2">Catégorie 2</option>
-            <option value="3">Catégorie 3</option>
-            <option value="4">The fourth choice</option>
-            <option value="5">42</option>
-          </select>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="form-group">
-          <label>Archives</label>
-          <select id="select-input" class="custom-select">
-            <option selected>Toutes les années</option>
-            <option value="2020">2020</option>
-            <option value="2019">2019</option>
-            <option value="2018">2018</option>
-            <option value="2017">2017</option>
-          </select>
-        </div>
-      </div>
-
-    </form>
-  </div>
-</aside>

package/dist/components/molecules/filters/filters.twig

@@ -1,23 +0,0 @@
-<aside>
-  <div class="d-flex justify-content-between px-3 p-md-0 align-baseline">
-    <h3 class="h5 mb-0 font-weight-normal">Filtrer votre recherche</h3>
-    <button
-      class="btn btn-sm btn-secondary d-md-none collapsed collapse-drop-toggle"
-      type="button"
-      data-toggle="collapse"
-      data-target="#form-filters"
-      aria-expanded="false"
-      aria-controls="form-filters"
-    >
-      Filtres
-      {% include '@atoms/icon/icon.twig' with {'icon': 'filter', icon_classes: 'feather'} %}
-    </button>
-  </div>
-  <div class="collapse collapse-md-show collapse-drop" id="form-filters">
-    <form class="p-3 p-md-0">
-      {% include "@molecules/form-group/form-group-select.twig" %}
-      {% include "@molecules/form-group/form-group-checkboxes.twig" %}
-      {% include "@molecules/form-group/form-group-checkboxes.twig" %}
-    </form>
-  </div>
-</aside>

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

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

package/dist/components/molecules/footnotes/footnotes.twig

@@ -1,14 +0,0 @@
-<article>
-  <p>Maintaining <a href="#footnotes" aria-describedby="footnote-label" id="footnotes-ref">footnotes</a> manually can be a pain. By using <a href="#css" aria-describedby="footnote-label" id="css-ref">CSS</a> <a href="#css-counters" aria-describedby="footnote-label" id="css-counters-ref">counters</a> to add the numbered references in the text and an ordered list to display the actual footnotes in the footer, it becomes extremely easy.</p>
-
-  <footer>
-    <h2 class="sr-only" id="footnote-label">Footnotes</h2>
-    <ol>
-      <li id="footnotes">Footnotes are notes placed at the bottom of a page. They cite references or comment on a designated part of the text above it. <a href="#footnotes-ref" class="back-to-content" aria-label="Back to content">&#8617;</a></li>
-
-      <li id="css">Cascading Style Sheets <a href="#css-ref" class="back-to-content" aria-label="Back to content">&#8617;</a></li>
-
-      <li id="css-counters">CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. <a href="#css-counters-ref" class="back-to-content" aria-label="Back to content">&#8617;</a></li>
-    </ol>
-  </footer>
-</article>

package/dist/components/molecules/footnotes/footnotes.yml

@@ -1,4 +0,0 @@
-title: Footnotes
-name: footnotes
-notes: |
-  Based on [Hugo Giraudel's article](http://www.sitepoint.com/accessible-footnotes-css) about accessible footnotes using right labelling and back links.

package/dist/components/molecules/form-group/form-group-checkboxes.twig

@@ -1,10 +0,0 @@
-<div class="form-group">
-  <label for="custom-check1">Checkboxes (multiple choice)</label>
-
-  {% for i in [1,2,3] %}
-  {% include "@atoms/checkbox/checkbox.twig" with {
-    id: i,
-    label: 'Option ' ~ i
-  } %}
-  {% endfor %}
-</div>

package/dist/components/molecules/form-group/form-group-error.twig

@@ -1,13 +0,0 @@
-<div class="form-group">
-  <label for="error-input" class="invalid-label">Input's label</label>
-  <input
-    type="text"
-    id="error-input"
-    class="form-control is-invalid"
-    value="Wrong value"
-    aria-describedby="error-input-help"
-  >
-  <small id="error-input-help" class="form-text invalid-feedback">
-    Error message goes here!
-  </small>
-</div>

package/dist/components/molecules/form-group/form-group-radio.twig

@@ -1,10 +0,0 @@
-<div class="form-group">
-  <label for="custom-radio1">Radio button (single choice)</label>
-
-  {% for i in [1,2,3] %}
-  {% include "@atoms/radio/radio.twig" with {
-    id: i,
-    label: 'Option ' ~ i
-  } %}
-  {% endfor %}
-</div>

package/dist/components/molecules/form-group/form-group-search.twig

@@ -1,13 +0,0 @@
-<div class="form-group form-group-search">
-  <label for="search-field" class="sr-only">Search</label>
-  <p class="search-container icon-right">
-    <input
-      type="search"
-      id="search-field"
-      class="form-control"
-      placeholder="Keywords..."
-      aria-describedby="search-field-help"
-    >
-    {% include '@atoms/icon/icon.twig' with { icon:  'icon-search' } %}
-  </p>
-</div>

package/dist/components/molecules/form-group/form-group-select.twig

@@ -1,3 +0,0 @@
-<div class="form-group">
-  {% include "@atoms/select/select.twig" %}
-</div>

package/dist/components/molecules/form-group/form-group-textarea.twig

@@ -1,4 +0,0 @@
-<div class="form-group">
-  <label for="awesome-textarea">Text area</label>
-  <textarea class="form-control" id="awesome-textarea" rows="3">Multiple lines can be typed here…</textarea>
-</div>

package/dist/components/molecules/form-group/form-group-upload.twig

@@ -1,4 +0,0 @@
-<div class="form-group">
-  <label for="upload-input">File upload</label>
-  {% include "@atoms/upload/upload.twig" %}
-</div>

package/dist/components/molecules/form-group/form-group.twig

@@ -1,13 +0,0 @@
-<div class="form-group">
-  <label for="awesome-input">Input's label</label>
-  <input
-    type="text"
-    id="awesome-input"
-    class="form-control"
-    placeholder="Type here..."
-    aria-describedby="awesome-input-help"
-  >
-  <small id="awesome-input-help" class="form-text text-muted">
-    Help text about the text field.
-  </small>
-</div>

package/dist/components/molecules/form-group/form-group.yml

@@ -1,21 +0,0 @@
-title: Form group
-name: form-group
-variants:
-  - name: checkboxes
-    title: Checkboxes
-  - name: radio
-    title: Radio
-  - name: error
-    title: Error form group
-  - name: select
-    title: Select form group
-  - name: textarea
-    title: Textarea
-  - name: upload
-    title: File upload
-  - name: search
-    title: Search field
-notes: |
-  Never forget the `for=""` attribute to link the input to the label.
-
-  ### Standard form group

package/dist/components/molecules/gallery/gallery.twig

@@ -1,27 +0,0 @@
-<div class="gallery-container">
-
-  <div id="my-gallery-{{ id ?: 1 }}" class="gallery gallery-main">
-    {% for i in 1..8 %}
-      <figure class="gallery-item" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-        <div class="gallery-item-inner">
-          <div class="img-wrapper">
-            <img src="./images/styleguide/gallery/gallery_0{{i}}.jpg" alt="Picture of an amazing science topic" class="img-fluid">
-          </div>
-        </div>
-        <figcaption>
-          <span>Picture of an amazing science topic</span>
-        </figcaption>
-      </figure>
-    {% endfor %}
-  </div>
-
-  <div class="gallery-nav" data-gallery="my-gallery-{{ id ?: 1 }}" aria-hidden="true">
-    {% for i in 1..8 %}
-      <figure class="gallery-nav-item" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-        <img src="./images/styleguide/gallery/thumb_0{{i}}.jpg" alt="Thumbnail of an amazing science topic" class="img-fluid">
-        <figcaption>Picture of an amazing science topic</figcaption>
-      </figure>
-    {% endfor %}
-  </div>
-
-</div>

package/dist/components/molecules/gallery/gallery.yml

@@ -1,5 +0,0 @@
-title: Gallery
-name: gallery
-wrapper: col-md-8
-notes: |
-  The gallery component uses [Flickity](https://flickity.metafizzy.co/) to manage the slider and fullscreen capabilities.

package/dist/components/molecules/key-number/key-number-large.twig

@@ -1,29 +0,0 @@
-{% set icon = icon|default("https://via.placeholder.com/") %}
-<div class="key-number-large">
-  <div class="card border-0 bg-white m-0 h-100">
-    <div class="card-header border-0">
-      <div class="row">
-        <div class="col-md-6">
-          <p class="h4">Pays d'origine</p>
-        </div>
-        <div class="col-md-6 text-right">
-          <img src="images/styleguide/key-numbers/collaborations.png" alt="">
-        </div>
-      </div>
-    </div>
-    <div class="card-body pt-0">
-      <div class="row">
-        <div class="col-md-6">
-          <hr>
-          <p class="mb-0 display-4 font-weight-bold">2'706</p>
-          <p class="text-small">Femmes</p>
-        </div>
-        <div class="col-md-6">
-          <hr>
-          <p class="mb-0 display-4 font-weight-bold">7'180</p>
-          <p class="text-small">Hommes</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/dist/components/molecules/key-number/key-number.twig

@@ -1,23 +0,0 @@
-{% set icon = icon|default("https://via.placeholder.com/") %}
-<div class="key-number">
-  <div class="card border-0 bg-white m-0 h-100">
-    <div class="card-header border-0">
-      <p class="h6 mb-3 text-capitalize">Étudiants</p>
-      <img src="images/styleguide/key-numbers/students.png" class="d-block m-auto" alt="">
-    </div>
-    <div class="card-body pt-0">
-      <div class="row">
-        <div class="col-sm-6">
-          <hr>
-          <p class="h5 mb-0">2'706</p>
-          <p class="text-small">Femmes</p>
-        </div>
-        <div class="col-sm-6">
-          <hr>
-          <p class="h5 mb-0">7'180</p>
-          <p class="text-small">Hommes</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/dist/components/molecules/key-number/key-number.yml

@@ -1,7 +0,0 @@
-title: Key Number
-name: key-number
-wrapper: col-md-6 bg-gray-100
-variants:
-  - name: large
-    title: Large
-    wrapper: 'bg-gray-100'

package/dist/components/molecules/links-group/links-group-teaser.twig

@@ -1,13 +0,0 @@
-<div class="links-group links-group-teaser">
-  <h5 id="links-group-title"><a class="link-pretty" href="#">Vue d’ensemble de l’EPFL</a></h5>
-  <nav
-    class="nav flex-column flex-wrap align-items-start"
-    role="navigation"
-    aria-labelledby="links-group-title"
-  >
-    <a class="nav-link link-pretty" href="#">Chiffres clés</a>
-    <a class="nav-link link-pretty" href="#">3 missions de l’EPFL</a>
-    <a class="nav-link link-pretty" href="#">Organigrammes de la direction</a>
-    <a class="nav-link link-pretty" href="#">Réalisations importantes de l’EPFL</a>
-  </nav>
-</div>

package/dist/components/molecules/links-group/links-group.twig

@@ -1,15 +0,0 @@
-<div class="links-group">
-  <h5 id="links-group-title">Plus d'informations sur la faculté</h5>
-  <nav
-    class="nav flex-column flex-wrap align-items-start"
-    role="navigation"
-    aria-labelledby="links-group-title"
-  >
-    <a class="nav-link link-pretty" href="#">Tous les laboratoires de la faculté</a>
-    <a class="nav-link link-pretty" href="#">Liste des professeurs de la faculté</a>
-    <a class="nav-link link-pretty" href="#">Postes à pourvoir à l'ENAC</a>
-    <a class="nav-link link-pretty" href="#">Services internes</a>
-    <a class="nav-link link-pretty" href="#">L'organisation de la faculté</a>
-    <a class="nav-link link-pretty" href="#">Chaires de l'ENAC</a>
-  </nav>
-</div>

package/dist/components/molecules/links-group/links-group.yml

@@ -1,9 +0,0 @@
-title: Links group
-name: links-group
-background: '#EEEEEE'
-notes: |
-
-  ### Links block
-variants:
-  - name: teaser
-    title: Links teaser

package/dist/components/molecules/list-group/list-group-borderless.twig

@@ -1,25 +0,0 @@
-<div class="list-group">
-  {% for i in 1..4 %}
-    <div class="list-group-item list-group-item-borderless">
-      <div class="row">
-        <div class="col-md-8">
-          <h4 class="h5">Measuring Latency: Am I doing it right?</h4>
-          <p class="text-muted small mb-0">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
-            Author(s): <a class="text-muted" href="#">John Doe</a>, <a class="text-muted" href="#">John Doe</a>, <a class="text-muted" href="#">John Doe</a>
-          </p>
-        </div>
-        <div class="col-md-3 offset-md-1 text-right">
-          <p>
-            <a href="#" class="btn btn-secondary btn-sm">Detailed record<span class="sr-only">of publication "Measuring Latency: Am I doing it right?"</span></a>
-          </p>
-          <p class="text-muted small mb-0">
-            <a class="text-muted" href="#">Full text<span class="sr-only">of publication "Measuring Latency: Am I doing it right?"</span></a> -
-            <a class="text-muted" href="#">Bib TeX<span class="sr-only">of publication "Measuring Latency: Am I doing it right?"</span></a> -
-            <a class="text-muted" href="#">Endnote XML<span class="sr-only">of publication "Measuring Latency: Am I doing it right?"</span></a>
-          </p>
-        </div>
-      </div>
-    </div>
-  {% endfor %}
-</div>