epfl-elements 1.0.0 → 4.0.0

package/README.md

@@ -0,0 +1,72 @@
+# Elements
+#### *EPFL Web Styleguide*
+
+#### [👉 View online](https://epfl-si.github.io/elements)
+
+## Install
+
+To contribute and run the styleguide, you will need few things :
+- [🔀 Git](https://git-scm.com/) - Version control system
+- [📗 NodeJS 14+](https://nodejs.org/en/) - JavaScript runtime used to build the project
+- [🐈 Yarn](https://yarnpkg.com/lang/en/) - Dependency manager built on top of the NPM registry
+
+Then, to install the project onto your workstation:
+
+```bash
+$ git clone git@github.com:epfl-si/elements.git
+$ cd ./elements
+$ yarn
+```
+
+## Run locally
+
+As listed in the `package.json`, the following commands are available:
+
+- `$ yarn start` : Will launch a live reloaded server to help you **during development**
+- `$ yarn dist` : Will build your assets for **production usage** into the `dist/` directory
+
+## Backstop tests (local)
+
+EPFL-Elements uses [backstop.js](https://github.com/garris/BackstopJS#backstopjs) to perform visual regression testing.
+
+  > 💡 Instead of running the steps below on your workstation, you may want to have GitHub actions do the same for you in the cloud. See the next paragraph.
+
+To run a side-by-side comparison between the original state of Elements and your changes using Backstop, you need to have a locally-running Elements Web app as per the previous §. Then:
+
+1. Make sure all your changes are committed to git (not necessarily pushed)
+1. Run `yarn test:prepare`<br/>💡 **Do not** stop the EPFL-Elements Web app to type in this command! Use a new terminal window instead.
+1. Check out the upstream branch for your work (typically `origin/dev`): <pre>git checkout origin/dev</pre>
+1. Run `yarn test:reference`
+1. Check out your working branch again, e.g. <pre>git checkout feature/myfeature</pre>
+1. Run `yarn test:changes`
+1. The report should open in your browser automatically. If not, just open the `tests/backstop/html_report/index.html` file in your browser
+
+## Backstop tests (GitHub actions)
+
+Whenever one creates or updates (pushes to the underlying branch of) a GitHub pull request, a set of GitHub actions kicks off to perform the same visual regression testing as described in the previous paragraph, except that the processing happens in the cloud.
+
+1. Push your work to a feature branch
+1. If not already done, create a GitHub pull request out of that feature branch
+1. Wait a few minutes for the GitHub actions to terminate. <br/> 💡 If you are feeling impatient and/or bored, browse the [repository's Actions tab](https://github.com/epfl-si/elements/actions) and click your way through the yellow spinning icons to look at the logs while the GitHub actions are in progress.
+1. If all goes well, the GitHub actions' bots should append two new comments to the pull request's review thread. The second one contains a link to the Backstop report, which is a rather large (~150 Mb) file. In order to take a look at the report:
+  1. Download it by clicking the link
+  1. Unzip the file (💡 Depending on your browser's configuration, this may happen automatically)
+  1. Open the file `backstop-report/html_report/index.html` within the unzipped directory with your browser
+1. If you want to perform additional changes (e.g. to repair regressions spotted by Backstop), just push (or force-push) to the feature branch. When done, the GitHub actions will update the same two review messages in the PR thread (instead of creating new ones).
+
+## Create a new release
+
+1. [Ensure](https://github.com/lerna/lerna/issues/896#issuecomment-311894609) that your `~/.yarnrc` contains a line like <pre>registry "https://registry.npmjs.org/"
+</pre>
+1. Ensure that all the desired changes have been merged into the main (`dev`) branch on GitHub
+1. Type <pre>yarn release</pre> and follow the interactive instructions.
+
+The last step will cause the following things to happen:
+- Ensure that you are on the `dev` branch (or bail out if not)
+- Bump version number
+- Commit, tag and push
+
+... And in turn, *that* last step will cause the following things to happen *server-side*, using GitHub Actions:
+- Create a release on GitHub in .zip format
+- Update the [online demo on GitHub pages](https://epfl-si.github.io/elements/)
+- Update the [`dist/frontend` branch](https://github.com/epfl-si/elements/tree/dist/frontend)

package/{src/scss → assets}/config/bootstrap-variables.scss

@@ -3,6 +3,7 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
+@use 'sass:math';
 
 //
 // Color system
@@ -30,6 +31,8 @@ $red-dark:#b51f1f !default;
 $orange:  #f5a623 !default;
 $green:   #7ed321 !default;
 
+$green-text: #699b32;
+
 $colors: () !default;
 $colors: map-merge((
   "blue":       $blue,
@@ -185,7 +188,7 @@ $line-height-lg:              1.5 !default;
 $line-height-sm:              1.5 !default;
 
 $border-width:                1px !default;
-$border-color:                $gray-300 !default;
+$border-color:                $gray-200 !default;
 
 $border-radius:               2px !default;
 $border-radius-lg:            4px !default;
@@ -206,8 +209,10 @@ $transition-collapse:         height .35s ease !default;
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      "SuisseIntl", "Open Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+// official font is Suisse Int'l, but the license only allow to host
+// on a epfl domain, so we set it to Arial, the official fallback
+$font-family-sans-serif:      Arial, sans-serif, !default;
+$font-family-monospace:       monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 
@@ -230,7 +235,7 @@ $h4-font-size:                $font-size-base * 1.44 !default;
 $h5-font-size:                $font-size-base * 1.17 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      ($spacer / 2) !default;
+$headings-margin-bottom:      math.div($spacer, 2) !default;
 $headings-font-family:        inherit !default;
 $headings-font-weight:        400 !default;
 $headings-line-height:        1.2 !default;
@@ -583,7 +588,7 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-y:                  math.div($spacer, 2) !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
@@ -592,7 +597,7 @@ $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y:            math.div($nav-link-height - $navbar-brand-height, 2) !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -662,7 +667,7 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          $card-spacer-x !default;
 
-$card-group-margin:                 ($grid-gutter-width / 2) !default;
+$card-group-margin:                 math.div($grid-gutter-width, 2) !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;
@@ -699,8 +704,8 @@ $popover-box-shadow:                none !default;
 
 $popover-header-bg:                 darken($popover-bg, 3%) !default;
 $popover-header-color:              $gray-600 !default;
-$popover-header-padding-y:          ($grid-gutter-width / 2) !default;
-$popover-header-padding-x:          ($grid-gutter-width / 2) !default;
+$popover-header-padding-y:          math.div($grid-gutter-width, 2) !default;
+$popover-header-padding-x:          math.div($grid-gutter-width, 2) !default;
 
 $popover-body-color:                $body-color !default;
 $popover-body-padding-y:            $popover-header-padding-y !default;

package/{src → assets}/config/colors.json

@@ -6,5 +6,7 @@
   "$gray-200": "#d5d5d5",
   "$gray-300": "#c1c1c1",
   "$gray-600": "#707070",
-  "$black": "#212121"
+  "$black": "#212121",
+  "$leman": "#00A79F",
+  "$canard": "#007480"
 }

package/assets/config/variables.scss

@@ -0,0 +1,41 @@
+@charset 'utf-8';
+
+@import "./social-color.scss";
+
+/*
+  Variables for trapezes card
+*/
+$trapeze-height: 0.5rem;
+$trapeze-animation-duration: 0.2s;
+
+$header-height: 5.5rem;
+$main-nav-width: 28rem;
+
+// mobile-menu (mm) variables
+$mm-breadcrumbs-height: 3.5rem;
+$mm-lang-height: 3rem;
+$mm-lang-width: 5.8rem;
+
+$opacities: () !default;
+$opacities: map-merge((
+  "0": 0,
+  "10": .1,
+  "20": .2,
+  "25": .25,
+  "30": .3,
+  "40": .4,
+  "50": .5,
+  "60": .6,
+  "70": .7,
+  "75": .75,
+  "80": .8,
+  "90": .9,
+  "100": 1,
+), $opacities);
+
+// Legacy font-size
+$legacy-font-size-xl:   1.25rem;
+$legacy-font-size-lg:   1.125rem;
+$legacy-font-size-base: 1rem;
+$legacy-font-size-sm:   0.875rem;
+$legacy-font-size-xs:   0.75rem;

package/dist/components/atoms/alert/alert-types.twig

@@ -0,0 +1,16 @@
+{% include "@atoms/alert/alert.twig" %}
+
+{% include "@atoms/alert/alert.twig" with {
+  type: "info",
+  content: "<strong>Information.</strong> Événement non critique, du type « le site sera en maintenance cette nuit de 02:00 à 03:00 »."
+} %}
+
+{% include "@atoms/alert/alert.twig" with {
+  type: "warning",
+  content: "<strong>Warning...</strong> Merci de bien tenir compte de cette information : fermeture des portes à 19:30."
+} %}
+
+{% include "@atoms/alert/alert.twig" with {
+  type: "danger",
+  content: "<strong>Danger !</strong> On nous signale une indisponibilité de café sur tout le campus. Les autorités compétentes sont sur le coup."
+} %}

package/dist/components/atoms/alert/alert.twig

@@ -0,0 +1,7 @@
+<div class="alert alert-{{ type ?: 'success' }} alert-dismissible fade show" role="alert">
+  {{ content|default('<strong>Yay!</strong> Cette barre vous confirme un succès dans l’accomplissement d’une tâche, comme l’envoi d’un formulaire par exemple.') }}
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+

package/dist/components/atoms/alert/alert.yml

@@ -0,0 +1,13 @@
+title: Alert
+name: alert
+notes: |
+  Alerts help explain people what is going on in the system. Either for a success or a problem: the message should be clear. Green, blue and orange colours are specific to the alert component: **don't use them elsewhere**.
+variants:
+  - name: types
+    title: Alert types
+    notes: |
+      There is **4 variations** of the alert component:
+      * `alert-success` — used to confirm a completed task or the successful submission of a form.
+      * `alert-info` — used to display an interesting yet non-critical information.
+      * `alert-warning` — used for unexpected events, that people must pay attention.
+      * `alert-danger` — used for critical information: an error or the unavailability of a service.

package/dist/components/atoms/button/button-secondary-states.twig

@@ -0,0 +1,4 @@
+<button class="btn btn-secondary hover">Secondary hover</button>
+<button class="btn btn-secondary active">Secondary active</button>
+<button class="btn btn-secondary focus">Secondary focus</button>
+<button class="btn btn-secondary" disabled>Secondary disabled</button>

package/dist/components/atoms/button/button-secondary.twig

@@ -0,0 +1 @@
+<button class="btn btn-secondary">Secondary action</button>

package/dist/components/atoms/button/button-sizes.twig

@@ -0,0 +1,12 @@
+<div class="py-1">
+  <button class="btn btn-primary btn-sm">Primary small</button>
+</div>
+<div class="py-1">
+  <button class="btn btn-primary">Primary normal</button>
+</div>
+<div class="py-1">
+  <button class="btn btn-primary btn-lg">Primary large</button>
+</div>
+<div class="py-1">
+  <button class="btn btn-primary btn-block">Primary block</button>
+</div>

package/dist/components/atoms/button/button-states.twig

@@ -0,0 +1,4 @@
+<button class="btn btn-primary hover">Primary hover</button>
+<button class="btn btn-primary active">Primary active</button>
+<button class="btn btn-primary focus">Primary focus</button>
+<button class="btn btn-primary" disabled>Primary disabled</button>

package/dist/components/atoms/button/button.twig

@@ -0,0 +1 @@
+<button class="btn btn-primary">Primary action</button>

package/dist/components/atoms/button/button.yml

@@ -0,0 +1,29 @@
+title: Button
+name: button
+# wrapper: 'bg-dark'
+variants:
+  - name: states
+    title: Primary states preview
+    notes: |
+      *For previewing purposes only. **Do not use in production!***
+  - name: sizes
+    title: Sizes preview
+    notes: |
+      You can use **4 different sizes**:
+      * **Small**: is suitable for an area where you don’t have many space to display a button.
+      * **Normal**: is the default size.
+      * **Large**: use with caution. This button draws people’s attention, leaving the rest of the content aside.
+      * **Block**: using all available width. Useful on mobile, when you want action to end a block (submit a form for instance).
+  - name: secondary
+    title: Button secondary
+    notes: |
+      Less important actions use secondary-style buttons. Two regular cases: give hierarchy next to a primary-style button ; for groups of buttons. Like in the footer for instance.
+  - name: secondary-states
+    title: Secondary states preview
+    notes: |
+      *For previewing purposes only. **Do not use in production!***
+notes: |
+  Button is your interaction friend when you want people to complete an action. By clicking a button, people expect to trigger an event, confirm a form or load a new page. Don't put many buttons on one single page. The primary action should be obvious for people.
+
+  ### Button primary
+  Main action in a page uses primary-style buttons. If you have more than one button in a page, **give hierarchy** to those different actions. You can use secondary button style or turn it into a link.

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

@@ -0,0 +1,5 @@
+<div class="custom-controls-inline">
+  {% include '@atoms/checkbox/checkbox.twig' with { id: '22', label: 'First choice', checked: 'checked' } %}
+  {% include '@atoms/checkbox/checkbox.twig' with { id: '23', label: 'Choice number two' } %}
+  {% include '@atoms/checkbox/checkbox.twig' with { id: '24', label: 'Three is for me!' } %}
+</div>

package/dist/components/atoms/checkbox/checkbox-states.twig

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

package/dist/components/atoms/checkbox/checkbox.twig

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

package/dist/components/atoms/checkbox/checkbox.yml

@@ -0,0 +1,11 @@
+title: Checkbox
+name: checkbox
+variants:
+  - name: states
+    title: Checkbox list sample
+    notes: Here is a sample list with checkboxes.
+  - name: inline
+    title: Inline checkbox list
+    notes:
+notes: |
+  Items list with checkboxes enable people to select some options, or none, or all. Use checkboxes for search options, selection in a form, policy acknowledgment, etc.

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+{% 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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+{% 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

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

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

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

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

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

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

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

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