epfl-elements 4.4.0 → 4.5.0

package/dist/components/atoms/collapse/collapse-header.twig

@@ -1,22 +0,0 @@
-<section class="collapse-container">
-  <header
-    class="collapse-title collapse-title-desktop collapsed"
-    data-toggle="collapse"
-    data-target="#collapse-2"
-    aria-expanded="false"
-    aria-controls="collapse-2"
-  >
-    <p class="title">Lorem ipsum dolor sit amet, consectetur adipising elit</p>
-    <ul class="list-inline has-sep small text-muted">
-      <li>Lorem ipsum</li>
-      <li>Dolor sit amet</li>
-      <li>Consectetur</li>
-      <li>Adipsing elit</li>
-    </ul>
-  </header>
-
-  <div class="collapse collapse-item collapse-item-desktop" id="collapse-2">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut magna facilisis, mollis sapien vel, consectetur sem. Curabitur dignissim sem nisl, at convallis tellus mollis at. Cras accumsan dui maximus mi suscipit faucibus.</p>
-    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dignissim lectus metus, ut sollicitudin ipsum aliquam pellentesque. Donec nec erat tempor, laoreet lacus et, ultricies velit. Suspendisse eget eleifend diam. Integer quis vehicula nibh. Quisque viverra in dui sed blandit. Sed gravida porta leo, in rhoncus metus venenatis ut. Morbi tincidunt tincidunt faucibus. </p>
-  </div>
-</section>

package/dist/components/atoms/collapse/collapse-partial.twig

@@ -1,19 +0,0 @@
-<div class="collapse collapse-partial" id="biography-text" aria-expanded="false">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros. Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus. Curabitur eu risus vel leo vehicula auctor. Aenean in velit nisi. Curabitur ultricies lacinia odio, sed egestas ex facilisis nec. Pellentesque et sagittis justo, id consequat odio. Nullam molestie sit amet eros quis consequat.</p>
-  <h3>Mission</h3>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros.</p>
-  <p>Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus. Curabitur eu risus vel leo vehicula auctor. Aenean in velit nisi. Curabitur ultricies lacinia odio, sed egestas ex facilisis nec. Pellentesque et sagittis justo, id consequat odio. Nullam molestie sit amet eros quis consequat.</p>
-  <h3>Travail en cours</h3>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros. Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus.</p>
-</div>
-
-<button
-  class="collapsed btn btn-light btn-block btn-sm mt-3"
-  data-toggle="collapse"
-  data-target="#biography-text"
-  aria-hidden="true"
-  aria-controls="biography-text"
->
-  Show full biography
-  {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
-</button>

package/dist/components/atoms/collapse/collapse-title.twig

@@ -1,14 +0,0 @@
-<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>

package/dist/components/atoms/collapse/collapse.twig

@@ -1,14 +0,0 @@
-<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>

package/dist/components/atoms/collapse/collapse.yml

@@ -1,20 +0,0 @@
-title: Collapse
-name: collapse
-variants:
-  - name: header
-    title: Collapse with complex header
-    notes: |
-      As it is not semantically valid to use an element such as <p> as a child of <button>, this structure can be used when more content is needed in the collapse header.
-
-  - name: partial
-    title: Partial collapse
-    notes: |
-      The partial collapse allows you to show part of a content to the user. When it is closed, it will fade to white towards the bottom where it is cut. \
-      To define the default height of the collapse, you can use `collapse-partial-1` to `collapse-partial-9` classes on the `.collapse-partial` tag.
-
-notes: |
-  Collapse component contains chunks of content. You can **display or hide** this content by triggering it. Use it when content is dense and you want to suggest **extra readings**. The collapsed content should not be critical for the reader. You may also allow collapsible items to be open at the same time.
-
-  The collapse JavaScript plugin serves to show and hide content. Buttons or anchors are triggers mapped to the specific elements you toggle. Collapsing an element will `animate the height` from its current value to `0`. Given how CSS handles animations, you cannot use padding on a `.collapse` element. Instead, use the class as an independent wrapping element.
-
-  These elements are useful in groups. Use them to display various types of information, the most common use being **FAQ sections**. For more information, see the [collapse-group molecule](#/molecules/collapse-group).

package/dist/components/atoms/definition-list/definition-list-grid.twig

@@ -1,17 +0,0 @@
-<h4>Informations utiles</h4>
-<dl class="definition-list definition-list-grid">
-  <dt>Fonction</dt>
-  <dd>Chercheur</dd>
-  <dt>Unité</dt>
-  <dd><a class="link-pretty" href="#">Laboratoire de métallurgie mécanique</a></dd>
-  <dt>Domaines de recherche</dt>
-  <dd>
-    <a href="#" class="tag tag-primary">Inorganic Chemistry</a>
-    <a href="#" class="tag tag-primary">Organic Chemistry</a>
-    <a href="#" class="tag tag-primary">Renewable Energy</a>
-  </dd>
-  <dt>Bureau</dt>
-  <dd><a class="link-pretty" href="#">BM 42</a></dd>
-  <dt class="definition-list-item-full">A propos</dt>
-  <dd class="definition-list-item-full">Research at the Laboratory of Mechanical Metallurgy addresses the science and engineering of advanced metallic materials. Our activities and interests span the entire spectrum from materials processing to the exploration of links between the microstructure and the properties of materials. Materials we study are made at least in part of metal and can be destined for structural or for functional applications.</dd>
-</dl>

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

@@ -1,9 +0,0 @@
-<h4>Terms definition list</h4>
-<dl class="definition-list">
-  <dt>Exams and student assessment</dt>
-  <dd>All you need to know about exams: schedules, pass conditions, statements of results, what to do in case of illness on the day of an exam, what to do in case of failure, etc.</dd>
-  <dt>Internships</dt>
-  <dd>Internship exchange. Information on internships by Section.</dd>
-  <dt><a href="#">Special needs / course exemptions</a></dt>
-  <dd>Application procedure for course exemption. Application procedure for adapted curricula for disabled students or students with high-level sporting or musical activities.</dd>
-</dl>

package/dist/components/atoms/definition-list/definition-list.yml

@@ -1,13 +0,0 @@
-title: Definition list
-name: definition-list
-notes: |
-  The definition list component is a **set of definitions**. Every definition forme of two elements: a **term** to define, and a **definition** explaining its meaning. You can add links in both titles and texts. There is no hierarchy or levels in this list.
-
-  ### Standard definition list
-variants:
-  - name: grid
-    title: Grid definition list (table-like)
-    notes: |
-      Definitions appear in a grid.
-
-      ♿️ **Accessibility note**: Don't forget to add a title to the grid!

package/dist/components/atoms/drawer/drawer.twig

@@ -1,10 +0,0 @@
-<div class="drawer mr-3 mr-xl-0">
-  <button class="drawer-toggle">
-    {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-right' } %}
-  </button>
-  <a href="#" class="drawer-link">
-    <span class="text">
-      Go to main site
-    </span>
-  </a>
-</div>

package/dist/components/atoms/drawer/drawer.yml

@@ -1,4 +0,0 @@
-title: Drawer
-name: drawer
-notes: |
-  The drawer component serves one purpose only. **It enables people to go to EPFL’s main website.** This component should appear on all EPFL related websites, as part of their header. It is part of the “[Header light](#/organisms/header)” component.

package/dist/components/atoms/dropdown/dropdown.twig

@@ -1,11 +0,0 @@
-{% set dropdown_label = dropdown_label|default('Dropdown button') %}
-<div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    {{dropdown_label}}
-  </button>
-  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-    <a class="dropdown-item" href="#">Action</a>
-    <a class="dropdown-item active" href="#">Another action</a>
-    <a class="dropdown-item" href="#">Something else here</a>
-  </div>
-</div>

package/dist/components/atoms/dropdown/dropdown.yml

@@ -1,10 +0,0 @@
-name: dropdown
-title: Dropdown
-notes: |
-  The dropdown component **triggers an action**. Use it when people need to perform an action in the page. Do not confuse this component with the [select component](#/atoms/select).
-
-  Remember to **keep lists useful**. Clear and short lists are the bests! Long lists slow the decision-making process. If you have few items (2 to 3), use other components, such as a [link](#/atoms/link) or a [button](#/atoms/button).
-
-  **Active highlight**
-
-  to indicate the current item, use the class `active` on the corresponding `<a>` tag

package/dist/components/atoms/favicon/favicon.twig

@@ -1,16 +0,0 @@
-  <link rel="icon" type="image/png" sizes="228x228" href="/favicons/favicon-228.png">
-  <link rel="icon" type="image/png" sizes="180x180" href="./favicons/favicon-180.png">
-  <link rel="icon" type="image/png" sizes="152x152" href="./favicons/favicon-152.png">
-  <link rel="icon" type="image/png" sizes="144x144" href="./favicons/favicon-144.png">
-  <link rel="icon" type="image/png" sizes="128x128" href="./favicons/favicon-128.png">
-  <link rel="icon" type="image/png" sizes="120x120" href="./favicons/favicon-120.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="./favicons/favicon-96.png">
-  <link rel="icon" type="image/png" sizes="76x76" href="./favicons/favicon-76.png">
-  <link rel="icon" type="image/png" sizes="57x57" href="./favicons/favicon-57.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png">
-  <link rel="manifest" href="./favicons/site.webmanifest">
-  <link rel="mask-icon" href="./favicons/safari-pinned-tab.svg" color="#5bbad5">
-  <meta name="msapplication-TileColor" content="#ffffff">
-  <meta name="theme-color" content="#e30713">

package/dist/components/atoms/favicon/favicon.yml

@@ -1,2 +0,0 @@
-title: favicon
-name: favicon

package/dist/components/atoms/figure/figure.twig

@@ -1,4 +0,0 @@
-<figure>
-  {% include '@atoms/picture/picture-one-third.twig' %}
-  <figcaption>Lorem ipsum dolor sit amet.</figcaption>
-</figure>

package/dist/components/atoms/figure/figure.yml

@@ -1,4 +0,0 @@
-title: Figure
-name: figure
-notes: |
-  This component is an entity that **is referenced in the flow of the page**. It is a visual version of the [sidenotes](#/molecules/sidenotes) or [footnotes](#/molecules/footnotes). It can contain an image, an illustration, a diagram or a code snippet. You can describe the element with a **caption**.

package/dist/components/atoms/icon/icon-list-feather.twig

@@ -1,10 +0,0 @@
-<table class="table">
-  <tbody>
-    {% for icon in feathericons %}
-      <tr>
-        <td>{% include "@atoms/icon/icon.twig" with { icon:  icon, icon_classes:'feather' } %}</td>
-        <td><code>#{{icon}}</code></td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>

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

@@ -1,10 +0,0 @@
-<table class="table">
-  <tbody>
-    {% for icon in icons %}
-      <tr>
-        <td>{% include "@atoms/icon/icon.twig" with { icon: 'icon-' ~ icon } %}</td>
-        <td><code>#icon-{{icon}}</code></td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>

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

@@ -1,2 +0,0 @@
-{% set icon_classes = icon_classes|default('') %}
-<svg class="icon{{ icon_classes ? ' ' ~ icon_classes }}" aria-hidden="true"><use xlink:href="#{{ icon ?: 'icon-elements' }}"></use></svg>

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

@@ -1,18 +0,0 @@
-title: Icon
-name: icon
-notes: |
-  Icons or pictograms are visual cues for interface elements, **use them sparingly**. Remember that icons should (almost) **always come with a label**. One of the exception being the magnyfing-glass icon for the search. This case is well recognized nowadays.
-
-  The icon component requires the icons sprite injected in the page to work. Please have a look at the `svg-icons.js` file.
-
-  **A11y note —**
-  The icon is hidden to screen readers with `aria-hidden="true"`, don't forget to add meaning to the component it is placed in (button, label, etc).
-variants:
-  - name: list-feather
-    title: Feather icons
-    notes: |
-      When using an icon from the Feather icons category, the `svg` element must have the `feather` class to display correctly.
-  - name: list
-    title: Elements icons
-    notes: |
-      Here is the list of custom icons used in the styleguide.

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

@@ -1 +0,0 @@
-<input type="text" class="form-control" value="Nop, nothing to edit here" disabled>

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

@@ -1 +0,0 @@
-<input type="text" class="form-control is-invalid" value="Something is wrong here!">

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

@@ -1 +0,0 @@
-<input type="text" class="form-control focus" value="You got my attention">

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

@@ -1 +0,0 @@
-<input type="text" class="form-control hover" value="Nice to hover you">

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

@@ -1 +0,0 @@
-<input type="text" class="form-control" value="This is my entry">

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

@@ -1 +0,0 @@
-<input type="text" class="form-control" placeholder="Type here...">

package/dist/components/atoms/input/input.yml

@@ -1,30 +0,0 @@
-title: Input
-name: input
-variants:
-  - name: value
-    title: With value
-    notes: |
-      Sample input with text content. Inputs can have pre-filled content that people can edit.
-  - name: hover
-    title: Hover*
-    notes: |
-      *For previewing purposes only. **Do not use in production!*** \
-      *Represents the input when the mouse cursor hovers the component.*
-  - name: focus
-    title: Focus*
-    notes: |
-      *For previewing purposes only. **Do not use in production!*** \
-      *Represents the input when you are editing the content inside the component.*
-  - name: error
-    title: Error
-    notes: |
-      The style to display when you perform validation in a form and that an error appears.
-  - name: disabled
-    title: Disabled
-    notes: |
-      You cannot edit the input content. A use case can be you want to show the entered content without allowing people to edit it.
-notes: |
-  The input atom is the solution when you need people to submit text content. Inputs serve for search fields, forms, newsletter subscriptions, etc.
-
-  ### Placeholder only
-  The basic component, a box with a placeholder text.

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

@@ -1,4 +0,0 @@
-<a href="#" class="link-icon">
-  Link with an arrow icon
-  {% include '@atoms/icon/icon.twig' with {'icon': 'icon-arrow-right'} %}
-</a>

package/dist/components/atoms/link/link-login.twig

@@ -1,4 +0,0 @@
-<span class="small">
-  {% include '@atoms/icon/icon.twig' with { icon: 'lock', icon_classes:'feather' } %}
-  <a href="#">Login</a>
-</span>

package/dist/components/atoms/link/link.twig

@@ -1,4 +0,0 @@
-<p><strong class="pr-3">Vanilla link:</strong> <a href="http://bit.ly/2DLIPLo">Teaching & PhD</a></p>
-<p><strong class="pr-3">Pretty link:</strong> <a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></p>
-<p class="mt-4"><strong class="pr-3">Dark link:</strong> <span class="p-3 bg-dark"><a class="text-white" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></span></p>
-<p class="mt-4"><strong class="pr-3">Dark pretty link:</strong><span class="p-3 bg-dark"><a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></span></p>

package/dist/components/atoms/link/link.yml

@@ -1,26 +0,0 @@
-title: Link
-name: link
-notes: >
-  A link is a **navigation** component. Links are recognized as **doors between pages**. That means **links description** should be **self-explanatory**. People need to understand where they will land, if they click on a link. Avoid having long links. The **3-words-maximum** rule is good.
-
-
-  Links may - in some situations - activate interactions without loading a new the page. Like loading extra elements from a results list or sort items in a table.
-
-  ## Links styles
-
-  Default style for links uses a **red underline**, in [supported
-  browsers](https://caniuse.com/#feat=text-decoration). In other browsers, the underline
-  uses text color.
-
-  The `link-pretty` class creates a better and more cross-browser style.
-
-  The `link-collapse` class sets the link to have a red triangle and special
-  styles.
-variants:
-  - name: icon
-    title: Icon
-    notes: |
-      You can set up a link with a custom icon. The icon will automatically be at the other end of the element (with flex).
-  - name: login
-    title: Login link
-    notes:

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

@@ -1,11 +0,0 @@
-<ul class="list-inline">
-  <li>Lorem ipsum</li>
-  <li>Phasellus iaculis</li>
-  <li>Nulla volutpat</li>
-</ul>
-
-<ul class="list-inline has-sep">
-  <li>Lorem ipsum</li>
-  <li>Phasellus iaculis</li>
-  <li>Nulla volutpat</li>
-</ul>

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

@@ -1,28 +0,0 @@
-<ol>
-  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
-  <li>Lorem ipsum dolor sit amet consectetur adipisicing
-    <ol>
-      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
-      <li>Lorem ipsum
-        <ol>
-          <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
-        </ol>
-      </li>
-    </ol>
-  </li>
-  <li>Lorem ipsum</li>
-  <li>Lorem ipsum dolor sit amet.</li>
-</ol>
-
-<ol>
-  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
-  <li>Lorem ipsum dolor sit amet.
-    <ul>
-      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!
-      </li>
-      <li>Lorem ipsum dolor sit amet</li>
-    </ul>
-  </li>
-  <li>Lorem ipsum</li>
-  <li>Lorem ipsum dolor sit amet consectetur adipisicing</li>
-</ol>

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

@@ -1,24 +0,0 @@
-<ul>
-  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
-  <li>Lorem ipsum dolor sit amet consectetur adipisicing.
-    <ul>
-      <li>Lorem ipsum dolor sit amet consectetur.
-        <ul>
-          <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
-        </ul>
-      </li>
-    </ul>
-  </li>
-  <li>Lorem ipsum dolor sit amet consectetur.</li>
-</ul>
-
-<ul>
-  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
-  <li>Lorem ipsum dolor sit amet consectetur adipisicing.
-    <ol>
-      <li>Lorem ipsum dolor sit amet consectetur.</li>
-      <li>Lorem ipsum dolor</li>
-    </ol>
-  </li>
-  <li>Lorem ipsum dolor sit amet consectetur.</li>
-</ul>

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

@@ -1,5 +0,0 @@
-<ul class="list-unstyled">
-  <li>Lorem ipsum</li>
-  <li>Phasellus iaculis</li>
-  <li>Nulla volutpat</li>
-</ul>

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

@@ -1,13 +0,0 @@
-<ul>
-  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
-  <li>Lorem ipsum dolor sit amet.</li>
-  <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
-  <li>Lorem ipsum dolor sit amet consectetur.</li>
-</ul>
-
-<ol>
-  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, facere!</li>
-  <li>Lorem ipsum dolor sit amet.</li>
-  <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
-  <li>Lorem ipsum dolor sit amet consectetur.</li>
-</ol>

package/dist/components/atoms/list/list.yml

@@ -1,13 +0,0 @@
-name: list
-title: Lists
-variants:
-  - name: unordered
-    title: Unordered list (bullets)
-  - name: ordered
-    title: Ordered list (numbers)
-  - name: inline
-    title: Inline list
-  - name: unstyled
-    title: Unstyled list
-notes: |
-  The classic way to display a group of elements, with or without hierarchy (see the variants lower on this page). Use lists in content areas.

package/dist/components/atoms/loader/loader.twig

@@ -1,3 +0,0 @@
-<span class="loader" role="status">
-    <span class="sr-only">Loading...</span>
-</span>

package/dist/components/atoms/loader/loader.yml

@@ -1,2 +0,0 @@
-title: Loader
-name: loader

package/dist/components/atoms/nav-lang/nav-lang-short.twig

@@ -1,30 +0,0 @@
-{% if language is not defined %}{% set language = 'fr' %}{% endif %}
-
-<nav class="nav-lang nav-lang-short ml-auto">
-  <ul>
-    {% if language == 'fr' %}
-    <li>
-      <span class="active" aria-label="Français">FR</span>
-    </li>
-    <li>
-      <a href="#" aria-label="English">EN</a>
-    </li>
-    {% endif %}
-    {% if language == 'en' %}
-    <li>
-      <a href="#" aria-label="Français">FR</a>
-    </li>
-    <li>
-      <span class="active" aria-label="English">EN</span>
-    </li>
-    {% endif %}
-    {% if language == 'de' %}
-      <li>
-        <span class="active" aria-label="Deutsch">DE</span>
-      </li>
-      <li>
-        <a href="#" aria-label="Français">FR</a>
-      </li>
-    {% endif %}
-  </ul>
-</nav>

package/dist/components/atoms/nav-lang/nav-lang.twig

@@ -1,29 +0,0 @@
-<nav class="nav-lang ml-auto dropdown" aria-label="Change language">
-  <button class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
-    {% include '@atoms/icon/icon.twig' with {icon: 'icon-planet'} %}
-    <span>FR</span>
-  </button>
-  <ul class="dropdown-menu">
-    <li>
-      <a aria-label="Français (Current language)" class="active dropdown-item" >
-        {% include '@atoms/icon/icon.twig' with {icon: 'icon-planet'} %}
-        <span>FR</span>
-      </a>
-    </li>
-    <li>
-      <a href="#" aria-label="English" class="dropdown-item">
-        <span>EN</span>
-      </a>
-    </li>
-    <li>
-      <a href="#" aria-label="русский" class="dropdown-item">
-        <span>RU</span>
-      </a>
-    </li>
-    <li>
-      <a href="#" aria-label="Deutsch" class="dropdown-item">
-        <span>DE</span>
-      </a>
-    </li>
-  </ul>
-</nav>

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

@@ -1,7 +0,0 @@
-title: Nav lang
-name: nav-lang
-variants:
-  - name: short
-    title: Less than 2 languages
-    notes: >
-      When only 2 languages are available, displaying 2 options doesn't require a dropdown menu

package/dist/components/atoms/nav-toggle/nav-toggle-async.twig

@@ -1,6 +0,0 @@
-<button id="nav-toggle" class="nav-toggle nav-toggle-async btn btn-secondary">
-  {% include '@atoms/loader/loader.twig' %}
-  {% include '@atoms/icon/icon.twig' with { icon: 'icon-browse' } %}
-  {% include '@atoms/icon/icon.twig' with { icon: 'icon-close' } %}
-  Browse
-</button>

package/dist/components/atoms/nav-toggle/nav-toggle.twig

@@ -1,6 +0,0 @@
-<button id="nav-toggle" class="nav-toggle btn btn-secondary">
-  {% include '@atoms/loader/loader.twig' %}
-  {% include '@atoms/icon/icon.twig' with { icon: 'icon-browse' } %}
-  {% include '@atoms/icon/icon.twig' with { icon: 'icon-close' } %}
-  Browse
-</button>

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

@@ -1,10 +0,0 @@
-title: Nav toggle
-name: nav-toggle
-variants:
-  - name: async
-    title: Async
-    notes: >
-      If you want an asynchronous transition, you can apply `nav-toggle-async` class on
-      the component. **It will start the loading** state `onClick` instead of opening the navigation.
-      <br /><br />
-      When your content is ready, **you need to trigger the end of the loading** state using `$('.nav-toggle-async').trigger('loadend');`

package/dist/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig

@@ -1,8 +0,0 @@
-<button class="btn btn-secondary nav-toggle-mobile d-xl-none">
-  <span class="label">Menu</span>
-  <div class="hamburger">
-    <span></span>
-    <span></span>
-    <span></span>
-  </div>
-</button>

package/dist/components/atoms/nav-toggle-mobile/nav-toggle-mobile.yml

@@ -1,4 +0,0 @@
-title: Nav toggle mobile
-name: nav-toggle-mobile
-notes: |
-  Toggles the menu on mobile. Won't be displayed on desktop screens.

package/dist/components/atoms/nav-user/nav-user-login.twig

@@ -1,6 +0,0 @@
-<div class="nav-user user-login mr-lg-2">
-  <a href="#" class="user-login-link">
-    {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
-    <span class="label">Connexion</span>
-  </a>
-</div>

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

@@ -1,16 +0,0 @@
-<div class="nav-user dropdown user-dropdown mr-lg-2">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <img class="user-avatar rounded-circle" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
-    <p class="user-name">Heidy Traill</p>
-  </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-    <li class="dropdown-item">
-      {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
-      <a href="#">Accéder à mon compte</a>
-    </li>
-    <li class="dropdown-item">
-      {% include '@atoms/icon/icon.twig' with {'icon': 'log-out', icon_classes: 'feather'} %}
-      <a href="#">Me déconnecter</a>
-    </li>
-  </ul>
-</div>