npm - epfl-elements - Versions diffs - 4.4.0 → 4.4.1 - Mend

epfl-elements 4.4.0 → 4.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (610) hide show

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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>

package/dist/components/atoms/trapeze/trapeze.yml DELETED Viewed

@@ -1,17 +0,0 @@
-name: trapeze
-title: Trapeze
-notes: >
-  The trapeze can be used to make a fancy hover effect. Two variants exist,
-  depending on your needs.
-  1. Use a `<span>` element to generate the wrapper.
-  2. Use a single class with pseudo-elements
-variants:
-  - name: horizontal
-    title: Horizontal
-  - name: pseudo
-    title: Pseudo
-    notes: |
-      Simply add the class `.link-trapeze-horizontal` or `.link-trapeze-vertical` to your link to add a pseudo element trapeze on hover.