epfl-elements 4.3.0 → 4.4.1

package/dist/components/atoms/nav-user/nav-user.yml

@@ -1,10 +0,0 @@
-title: Nav user
-name: nav-user
-notes: |
-  * If included in the header, the user dropdown and login link should be placed between the search form and language selector.
-  * If you choose to place it elsewhere, you may need to adjust the Boostratp margin classes on the `.nav-user` element.
-  * An example of user menu integration can be found on the [Laboratory Homepage](#/pages/lab-homepage) template page.
-variants:
-  - name: login
-    title: Login link
-    notes: 

package/dist/components/atoms/picture/picture-avatar.twig

@@ -1,18 +0,0 @@
-<picture>
-  <source
-    media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
-  <source
-    media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
-  <source
-    media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
-  <source
-    media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/60x60.jpg 1x,https://via.placeholder.com/120x120.jpg 2x">
-  <source
-    media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/90x90.jpg 1x,https://via.placeholder.com/180x180.jpg 2x">
-  <img src="https://via.placeholder.com/95x95.jpg" class="img-fluid rounded-circle" alt="ALT">
-</picture>

package/dist/components/atoms/picture/picture-cover.twig

@@ -1,19 +0,0 @@
-{% set cover_path = cover_path|default("https://via.placeholder.com/") %}
-<picture>
-  <source
-    media="(min-width: 1140px)"
-    srcset="{{cover_path}}1920x1080.jpg 1x,{{cover_path}}2880x1620.jpg 2x">
-  <source
-    media="(min-width: 960px)"
-    srcset="{{cover_path}}1140x641.jpg 1x,{{cover_path}}2280x1283.jpg 2x">
-  <source
-    media="(min-width: 720px)"
-    srcset="{{cover_path}}960x540.jpg 1x,{{cover_path}}1920x1080.jpg 2x">
-  <source
-    media="(min-width: 541px)"
-    srcset="{{cover_path}}720x405.jpg 1x,{{cover_path}}1440x810.jpg 2x">
-  <source
-    media="(max-width: 540px)"
-    srcset="{{cover_path}}540x304.jpg 1x,{{cover_path}}1080x608.jpg 2x">
-  <img src="{{cover_path}}1920x1080.jpg" class="img-fluid" alt="Cover description">
-</picture>

package/dist/components/atoms/picture/picture-fullwidth-teaser.twig

@@ -1,21 +0,0 @@
-{% if not img %}
-{% set img %}./images/styleguide/teaser/news-teaser{% endset %}
-{% endif %}
-<picture>
-  <source
-    media="(min-width: 1920px)"
-    srcset="{{img}}-1920x1080.jpg 1x, {{img}}-2240x1260.jpg 2x">
-  <source
-    media="(min-width: 1366px)"
-    srcset="{{img}}-1440x810.jpg 1x, {{img}}-1920x1080.jpg 2x">
-  <source
-    media="(min-width: 1200px)"
-    srcset="{{img}}-1294x728.jpg 1x, {{img}}-1600x900.jpg 2x">
-  <source
-    media="(min-width: 576px)"
-    srcset="{{img}}-768x432.jpg 1x, {{img}}-1440x810.jpg 2x">
-  <source
-    media="(max-width: 575px)"
-    srcset="{{img}}-576x324.jpg 1x, {{img}}-1140x641.jpg 2x">
-  <img src="{{img}}-1440x810.jpg" class="img-fluid" alt="image description">
-</picture>

package/dist/components/atoms/picture/picture-news-thumb.twig

@@ -1,8 +0,0 @@
-<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">
-  <source media="(min-width: 720px)" srcset="./images/styleguide/news-thumbs/news_thumb-80x45.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-160x90.jpg 2x">
-  <source media="(min-width: 541px)" srcset="./images/styleguide/news-thumbs/news_thumb-120x68.jpg 1x, ./images/styleguide/news-thumbs/news_thumb-240x135.jpg 2x">
-  <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>

package/dist/components/atoms/picture/picture-one-third-square.twig

@@ -1,18 +0,0 @@
-<picture>
-  <source
-    media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
-  <source
-    media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
-  <source
-    media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/960x960.jpg 1x,https://via.placeholder.com/1920x1920.jpg 2x">
-  <source
-    media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/240x240.jpg 1x,https://via.placeholder.com/480x480.jpg 2x">
-  <source
-    media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/180x180.jpg 1x,https://via.placeholder.com/360x360.jpg 2x">
-  <img src="https://via.placeholder.com/1140x1140.jpg" class="img-fluid" alt="ALT">
-</picture>

package/dist/components/atoms/picture/picture-one-third.twig

@@ -1,18 +0,0 @@
-<picture>
-  <source
-    media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
-  <source
-    media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
-  <source
-    media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/320x180.jpg 1x,https://via.placeholder.com/640x360.jpg 2x">
-  <source
-    media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
-  <source
-    media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="https://via.placeholder.com/380x214.jpg" class="img-fluid" alt="ALT">
-</picture>

package/dist/components/atoms/picture/picture-portrait.twig

@@ -1,18 +0,0 @@
-<picture>
-  <source
-    media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
-  <source
-    media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
-  <source
-    media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
-  <source
-    media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
-  <source
-    media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
-  <img src="https://via.placeholder.com/506x720.jpg" class="img-fluid" alt="ALT">
-</picture>

package/dist/components/atoms/picture/picture-question.twig

@@ -1,18 +0,0 @@
-<picture>
-  <source
-    media="(min-width: 1140px)"
-    srcset="./images/styleguide/homepage/7-science-question-SF.jpg 1x, ./images/styleguide/homepage/7-science-question-SF.jpg 2x">
-  <source
-    media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/475x267.jpg 1x,https://via.placeholder.com/950x534.jpg 2x">
-  <source
-    media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/400x225.jpg 1x,https://via.placeholder.com/800x450.jpg 2x">
-  <source
-    media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
-  <source
-    media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="./images/styleguide/homepage/7-science-question-SF.jpg" class="img-fluid" alt="ALT">
-</picture>

package/dist/components/atoms/picture/picture-thumb-square.twig

@@ -1,8 +0,0 @@
-<picture>
-  <source media="(min-width: 1140px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
-  <source media="(min-width: 960px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
-  <source media="(min-width: 720px)" srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
-  <source media="(min-width: 541px)" srcset="https://via.placeholder.com/120x120.jpg 1x,https://via.placeholder.com/240x240.jpg 2x">
-  <source media="(max-width: 540px)" srcset="https://via.placeholder.com/540x540.jpg 1x,https://via.placeholder.com/1080x1080.jpg 2x">
-  <img src="https://via.placeholder.com/95x95.jpg" class="img-fluid" alt="ALT">
-</picture>

package/dist/components/atoms/picture/picture.twig

@@ -1,18 +0,0 @@
-<picture>
-  <source
-    media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
-  <source
-    media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
-  <source
-    media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/480x270.jpg 1x,https://via.placeholder.com/960x540.jpg 2x">
-  <source
-    media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
-  <source
-    media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="https://via.placeholder.com/570x321.jpg" class="img-fluid" alt="image description">
-</picture>

package/dist/components/atoms/picture/picture.yml

@@ -1,43 +0,0 @@
-title: Picture
-name: picture
-wrapper: col-md-6
-variants:
-  - name: cover
-    title: Cover picture
-    wrapper: 'col-md-12'
-  - name: fullwidth-teaser
-    title: Fullwidth teaser
-    wrapper: 'col-md-12'
-    notes: |
-      Picture used in 'Organism > Fullwidth teaser' and 'News > Highlighted'.
-  - name: avatar
-    title: Avatar
-    wrapper: col-sm-4 col-md-2 col-lg-1
-    notes: |
-      Avatar picture need an equal height and width in order to be displayed as a circle
-  - name: portrait
-    title: Portrait
-    wrapper: col-md-3
-    notes: |
-      Portrait picture is used in People pages
-  - name: one-third
-    title: One third picture
-    wrapper: col-md-4
-  - name: one-third-square
-    title: One third Square picture
-  - name: news-thumb
-    title: News Listing Thumbnail
-    wrapper: col-3 col-md-2
-  - name: thumb-square
-    title: Listing square Thumbnail
-    wrapper: col-3 col-md-2
-notes: |
-
-  > The HTML **`<picture>` element** serves as a container for zero or more `<source>` elements and one `<img>` element to provide versions of an image for different display device scenarios. The browser will consider each of the child `<source>` elements and select one corresponding to the best match found; if no matches are found among the `<source>` elements, the file specified by the `<img>` element's src attribute is selected. The selected image is then presented in the space occupied by the `<img>` element. \
-  > — *[Read more on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)*
-
-  We are using `<picture>` in Elements instead of a simple `<img>` to **ensure that every user and device will receive the right image format, size and weight**.
-
-  This page presents all image formats defined in Element and all their related sizes. **This implies implemening a lot of image sizes**, but CMS like Wordpress can easily manage [that logic](https://developer.wordpress.org/reference/functions/add_image_size/).
-
-  ### Half desktop picture

package/dist/components/atoms/popover/popover.twig

@@ -1,11 +0,0 @@
-<button
-  aria-hidden="true"
-  type="button"
-  class="btn-circle"
-  data-toggle="popover"
-  data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut deserunt dolorem eligendi, nemo nulla quae reprehenderit saepe sapiente similique!"
->
-  {% include "@atoms/icon/icon.twig" with { icon: 'icon-info' } %}
-  {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-right', 'icon_classes': 'icon-rotate-90' } %}
-</button>
-<p class="sr-only">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut deserunt dolorem eligendi, nemo nulla quae reprehenderit saepe sapiente similique!</p>

package/dist/components/atoms/popover/popover.yml

@@ -1,6 +0,0 @@
-name: popover
-title: Popover
-notes: |
-  If you use the `.btn-circle` class on the popover toggle, the popover text should be also added in a `.sr-only` paragraph.
-
-  See the [cover](#/molecules/cover) component for an implementation inside a `<figcaption>`.

package/dist/components/atoms/radio/radio-inline.twig

@@ -1,4 +0,0 @@
-<div class="custom-controls-inline">
-  {% include '@atoms/radio/radio.twig' with { id: '22', name: '2', label: 'Offres du midi', checked: 'checked' } %}
-  {% include '@atoms/radio/radio.twig' with { id: '23', name: '2', label: 'Offres du soir' } %}
-</div>

package/dist/components/atoms/radio/radio-list.twig

@@ -1,4 +0,0 @@
-<h5>Make your choice (only one selection possible):</h5>
-{% include '@atoms/radio/radio.twig' with { id: '12', label: 'First choice' } %}
-{% include '@atoms/radio/radio.twig' with { id: '13', label: 'Choice number two' } %}
-{% include '@atoms/radio/radio.twig' with { id: '14', label: 'Three is for me!' } %}

package/dist/components/atoms/radio/radio.twig

@@ -1,4 +0,0 @@
-<div class="custom-control custom-radio">
-  <input type="radio" id="custom-radio{{id}}" name="customRadio{{name}}" class="custom-control-input" {{checked}}>
-  <label class="custom-control-label" for="custom-radio{{id}}">{{ label ?: 'Option one' }}</label>
-</div>

package/dist/components/atoms/radio/radio.yml

@@ -1,8 +0,0 @@
-title: Radio
-name: radio
-variants:
-  - name: list
-    title: Radio list sample
-    notes: Here is a sample list with radio buttons.
-  - name: inline
-    title: Inline radio list

package/dist/components/atoms/range/range.twig

@@ -1,8 +0,0 @@
-<div class="form-group custom-control">
-  <label for="range-slider">Example range</label>
-  <input type="range" id="rangeSlider" name="range" class="form-control-range custom-range" min="1" max="10" step="1" value="3" id="range-slider" oninput="rangeOutput.value = rangeSlider.value">
-  <span class="output">
-    Value:
-    <strong><output for="range-slider" id="rangeOutput" aria-hidden="true">3</output></strong>
-  </span>
-</div>

package/dist/components/atoms/range/range.yml

@@ -1,4 +0,0 @@
-title: Range
-name: range
-notes: |
-  Custom range slider.

package/dist/components/atoms/select/select-multiple.twig

@@ -1,13 +0,0 @@
-<div class="form-group">
-  <label>Pick a restaurant</label>
-  <select class="select-multiple" multiple="multiple" data-placeholder="Restaurant list">
-    <option value="1">Chuck Testa's tavern</option>
-    <option value="2">The Sage Cattabriga-Alosa hideout</option>
-    <option value="3">Nikola Tesla Drive-in</option>
-    <option value="4">A Love for Pizza 🍕</option>
-    <option value="5">The Hydron Collider
-    </option>
-    <option value="6">There's no place like 127.0.0.1</option>
-    <option value="7">The Shake Shack Space bar</option>
-  </select>
-</div>

package/dist/components/atoms/select/select.twig

@@ -1,11 +0,0 @@
-<div class="form-group">
-<label>Choose wisely</label>
-<select id="select-input" class="custom-select">
-  <option selected>Make a choice...</option>
-  <option value="1">Legolas</option>
-  <option value="2">Jar Jar Binks</option>
-  <option value="3">None of them</option>
-  <option value="4">The fourth choice</option>
-  <option value="5">42</option>
-</select>
-</div>

package/dist/components/atoms/select/select.yml

@@ -1,11 +0,0 @@
-title: Select
-name: select
-variants:
-  - name: multiple
-    title: Select multiple
-    notes: |
-      This variation of the select component enables **multiple choices**. Again, keep your list to the smallest. Think of having a “select all/none” item when the list is long.
-notes: |
-  The select component is mainly used in **forms**. Use it when people have to **choose options from a list**. The select component doesn't trigger actions: it stores a choice before submission. Don't use it when the number of options is low (2 to 3). Use the [checkboxes](#/atoms/checkbox) or [radio buttons](#/atoms/radio) instead. Pay  attention to **long lists**: beyond 7 or 8 options, people struggle to make a educated choice. In any case, keep your list below 15-ish items.
-
-  ### Standard select

package/dist/components/atoms/separator/separator.twig

@@ -1,7 +0,0 @@
-<hr>
-
-<hr class="bold">
-
-<hr class="darker">
-
-<hr class="bold darker">

package/dist/components/atoms/separator/separator.yml

@@ -1,5 +0,0 @@
-title: Separator
-name: separator
-notes: |
-  Use the `.bold` class to make the border wider.
-  Use the `.darker` class for a darker separator.

package/dist/components/atoms/social-icon/social-icon-discrete-link.twig

@@ -1,3 +0,0 @@
-{% include "@atoms/social-icon/social-icon-link.twig" with {
-  discrete: true
-} %}

package/dist/components/atoms/social-icon/social-icon-group.twig

@@ -1,24 +0,0 @@
-{% set round = round ? round : false %}
-{% set discrete = discrete ? discrete : false %}
-{% set negative = negative ? negative : false %}
-
-<ul class="social-icon-list list-inline">
-  <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative } %}
-  </li>
-  <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Twitter', icon: 'icon-twitter', round: round, discrete: discrete, negative: negative } %}
-  </li>
-  <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative } %}
-  </li>
-  <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'E-mail', icon: 'icon-mail-plane', round: round, discrete: discrete, negative: negative } %}
-  </li>
-  <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Whatsapp', icon: 'icon-whatsapp', round: round, discrete: discrete, negative: negative } %}
-  </li>
-  <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Linkedin', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative } %}
-  </li>
-</ul>

package/dist/components/atoms/social-icon/social-icon-link-group.twig

@@ -1,21 +0,0 @@
-{% set round = round ? round : false %}
-{% set discrete = discrete ? discrete : false %}
-{% set negative = negative ? negative : false %}
-
-<ul class="social-icon-list list-inline">
-  <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative, url: 'https://www.facebook.com/epflcampus' } %}
-  </li>
-  <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Twitter', icon: 'icon-twitter', round: round, discrete: discrete, negative: negative, url: 'https://twitter.com/epfl_en' } %}
-  </li>
-  <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative, url: 'http://instagram.com/epflcampus' } %}
-  </li>
-  <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Youtube', icon: 'icon-youtube', round: round, discrete: discrete, negative: negative, url: 'https://www.youtube.com/user/epflnews' } %}
-  </li>
-  <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on LinkedIn', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative, url: 'https://www.linkedin.com/school/epfl/' } %}
-  </li>
-</ul>

package/dist/components/atoms/social-icon/social-icon-link.twig

@@ -1,9 +0,0 @@
-{% set pretty_name = pretty_name ?: 'Twitter' %}
-{% set icon = icon ?: 'icon-twitter' %}
-{% set round = round ? ' social-icon-round' : '' %}
-{% set discrete = discrete ? ' social-icon-discrete' : '' %}
-{% set negative = negative ? ' social-icon-negative' : '' %}
-<a href="#" class="{{ 'social-icon social-' ~ icon ~ round ~ negative ~ discrete }}">
-  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
-  <span class="sr-only">{{ pretty_name }}</span>
-</a>

package/dist/components/atoms/social-icon/social-icon-negative-link.twig

@@ -1,3 +0,0 @@
-{% include "@atoms/social-icon/social-icon-link.twig" with {
-  negative: true
-} %}

package/dist/components/atoms/social-icon/social-icon-negative.twig

@@ -1,3 +0,0 @@
-{% include "@atoms/social-icon/social-icon.twig" with {
-  negative: true
-} %}

package/dist/components/atoms/social-icon/social-icon-round-discrete-link.twig

@@ -1,4 +0,0 @@
-{% include "@atoms/social-icon/social-icon-link.twig" with {
-  discrete: true,
-  round: true
-} %}

package/dist/components/atoms/social-icon/social-icon-round-link.twig

@@ -1,3 +0,0 @@
-{% include "@atoms/social-icon/social-icon-link.twig" with {
-  round: true
-} %}

package/dist/components/atoms/social-icon/social-icon-round.twig

@@ -1,3 +0,0 @@
-{% include "@atoms/social-icon/social-icon.twig" with {
-  round: true
-} %}

package/dist/components/atoms/social-icon/social-icon-single-link-with-details.twig

@@ -1,11 +0,0 @@
-{% set pretty_name = pretty_name ?: 'Twitter' %}
-{% set user_id = user_id ?: 'firstname.name' %}
-{% set icon = icon ?: 'icon-twitter' %}
-{% set round = round ? ' social-icon-round' : '' %}
-{% set discrete = discrete ? ' social-icon-discrete' : '' %}
-{% set negative = negative ? ' social-icon-negative' : '' %}
-{% set url = url or '#' %}
-<a href="{{ url }}" class="{{ 'social-icon social-icon-details social-' ~ icon ~ round ~ negative ~ discrete }}" rel="nofollow" title="View on {{ pretty_name }}">
-  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
-  <span class="user">{{ user_id }}</span>
-</a>

package/dist/components/atoms/social-icon/social-icon-single-link.twig

@@ -1,10 +0,0 @@
-{% set pretty_name = pretty_name ?: 'Follow us on Twitter' %}
-{% set icon = icon ?: 'icon-twitter' %}
-{% set round = round ? ' social-icon-round' : '' %}
-{% set discrete = discrete ? ' social-icon-discrete' : '' %}
-{% set negative = negative ? ' social-icon-negative' : '' %}
-{% set url = url ?:  '#' %}
-<a href="{{ url }}" class="{{ 'social-icon social-' ~ icon ~ round ~ negative ~ discrete }}" target="_blank" rel="nofollow noopener">
-  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
-  <span class="sr-only">{{ pretty_name }}</span>
-</a>

package/dist/components/atoms/social-icon/social-icon-single.twig

@@ -1,9 +0,0 @@
-{% set pretty_name = pretty_name ?: 'Twitter' %}
-{% set icon = icon ?: 'icon-twitter' %}
-{% set round = round ? ' social-icon-round' : '' %}
-{% set discrete = discrete ? ' social-icon-discrete' : '' %}
-{% set negative = negative ? ' social-icon-negative' : '' %}
-<span class="{{ 'social-icon social-' ~ icon ~ round ~ negative }}">
-  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
-  <span class="sr-only">{{ pretty_name }}</span>
-</span>

package/dist/components/atoms/social-icon/social-icon.twig

@@ -1,9 +0,0 @@
-{% set pretty_name = pretty_name ?: 'Twitter' %}
-{% set icon = icon ?: 'icon-twitter' %}
-{% set round = round ? ' social-icon-round' : '' %}
-{% set discrete = discrete ? ' social-icon-discrete' : '' %}
-{% set negative = negative ? ' social-icon-negative' : '' %}
-<span class="{{ 'social-icon social-' ~ icon ~ round ~ negative }}">
-  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
-  <span class="sr-only">{{ pretty_name }}</span>
-</span>

package/dist/components/atoms/social-icon/social-icon.yml

@@ -1,30 +0,0 @@
-title: Social icon
-name: social-icon
-variants:
-  - name: link
-    title: Link
-  - name: group
-    title: Group
-  - name: link-group
-    title: Link Group
-  - name: negative
-    title: Negative
-  - name: round
-    title: Round
-  - name: discrete-link
-    title: Discrete Link
-  - name: round-link
-    title: Round Link
-  - name: round-discrete-link
-    title: Round Discrete Link
-  - name: negative-link
-    title: Negative Link
-notes: |
-
-  Icons to accomodate social boxes. The available social networks are:
-  * `facebook`
-  * `instagram`
-  * `twitter`
-  * `e-mail`
-  * `whatsapp`
-  * `linkedin`

package/dist/components/atoms/tag/tag-input.twig

@@ -1,5 +0,0 @@
-<h5>Regular</h5>
-<input type="text" class="tag-input" placeholder="Enter a tag...">
-<hr>
-<h5>Small</h5>
-<input type="text" class="tag-input tag-input-sm" placeholder="Enter a tag..." value="Antistatique, EPFL, 🎒">

package/dist/components/atoms/tag/tag.twig

@@ -1,25 +0,0 @@
-<h5>Non-link</h5>
-<span class="tag tag-plain">Plain</span>
-<span class="tag tag-light">Light</span>
-
-<hr>
-<h5>Link</h5>
-<a href="#" class="tag tag-primary">Primary</a>
-<a href="#" class="tag tag-secondary">Secondary</a>
-<hr>
-<h5>removable</h5>
-<button class="btn tag tag-primary">
-  Primary
-  <span class="btn btn-secondary remove" title="Remove">×</span>
-</button>
-<button class="btn tag tag-secondary">
-  Secondary
-  <span class="btn btn-secondary remove" title="Remove">×</span>
-</button>
-<hr>
-<h5>Small</h5>
-<span class="tag tag-sm tag-plain">Plain</span>
-<span class="tag tag-sm tag-primary">Primary</span>
-<span class="tag tag-sm tag-secondary">Secondary</span>
-<span class="tag tag-sm tag-light">Light</span>
-<hr>

package/dist/components/atoms/tag/tag.yml

@@ -1,19 +0,0 @@
-title: Tag
-name: tag
-
-variants:
-  - name: input
-    title: Tag input
-    notes: |
-      Tag input is a specific style for text fields. Usable for search or publishing interfaces.
-
-      This component uses [Selectize.js](https://selectize.dev/). Have a look at the [documentation](https://github.com/selectize/selectize.js/blob/master/docs/usage.md) for more information about all the possibilities. You can start using it with the markup below.
-
-notes: |
-  Tags help categorise and label content items. They can be clicked (active) or informative (passive). Categories for a news article use tags, in an active way.
-
-  Like buttons, tags have different styles:
-  - **Non-link tags**, for informative tags
-  - **Link tags**, for clickable tags
-  - **Removable tags**, used in editable interfaces
-  - **Small tags**, when space is limited

package/dist/components/atoms/trapeze/trapeze-horizontal.twig

@@ -1,9 +0,0 @@
-<a href="#" class="trapeze-horizontal-container">
-  <div class="card mb-0">
-    <div class="card-body">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aliquid architecto culpa cumque dolores dolorum, eius eveniet hic inventore iste itaque laborum nemo nobis nostrum odit, perferendis quae tempora.
-    </div>
-  </div>
-  <span class="trapeze-horizontal"></span>
-</a>
-

package/dist/components/atoms/trapeze/trapeze-pseudo.twig

@@ -1,11 +0,0 @@
-<a href="#" class="card link-trapeze-vertical">
-  <div class="card-body">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aliquid architecto culpa cumque dolores dolorum, eius eveniet hic inventore iste itaque laborum nemo nobis nostrum odit, perferendis quae tempora.
-  </div>
-</a>
-
-<a href="#" class="card link-trapeze-horizontal">
-  <div class="card-body">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aliquid architecto culpa cumque dolores dolorum, eius eveniet hic inventore iste itaque laborum nemo nobis nostrum odit, perferendis quae tempora.
-  </div>
-</a>

package/dist/components/atoms/trapeze/trapeze.twig

@@ -1,9 +0,0 @@
-<a href="#" class="trapeze-vertical-container">
-  <div class="card">
-    <div class="card-body">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aliquid architecto culpa cumque dolores dolorum, eius eveniet hic inventore iste itaque laborum nemo nobis nostrum odit, perferendis quae tempora.
-    </div>
-  </div>
-  <span class="trapeze-vertical"></span>
-</a>
-