From 1600d5497e17ca49716a5d81e023d57d257ac71a Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Fri, 29 Jul 2022 15:44:58 +0200
Subject: [PATCH 1/2] Dropdown

---
 assets/js/theme/design-system/dropdown.js | 33 +++++++++++++++++++++++
 assets/js/theme/index.js                  |  1 +
 assets/sass/_theme/sections/diplomas.sass | 22 +++++++++++++--
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/theme/design-system/dropdown.js

diff --git a/assets/js/theme/design-system/dropdown.js b/assets/js/theme/design-system/dropdown.js
new file mode 100644
index 000000000..6eee0c0f5
--- /dev/null
+++ b/assets/js/theme/design-system/dropdown.js
@@ -0,0 +1,33 @@
+const CLASSES = {
+    DropdownOpened: 'is-opened'
+};
+
+class Dropdown {
+    constructor (selector) {
+        this.element = document.querySelector(selector);
+        this.dropdownButton = this.element.querySelector('button');
+
+        this.state = {
+            isOpened: false
+        };
+
+        this.listen();
+    }
+
+    listen () {
+        this.dropdownButton.addEventListener('click', () => {
+            this.toggleDropdown();
+        });
+    }
+
+    toggleDropdown (open = !this.state.isOpened) {
+        console.log('lalala')
+        let classAction;
+        this.state.isOpened = open;
+        classAction = this.state.isOpened ? 'add' : 'remove';
+        this.dropdownButton.setAttribute('aria-expanded', this.state.isOpened);
+        this.element.classList[classAction](CLASSES.DropdownOpened);
+    }
+}
+
+export default new Dropdown('.diplomas-select');
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 8aa2514e8..7c7f6a54f 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -1,6 +1,7 @@
 import './body.js';
 import './blocks/keyFigures';
 import './blocks/timeline';
+import './design-system/dropdown';
 import './nav/stickyNav';
 // import './nav/responsive';
 import './nav/mainMenu';
diff --git a/assets/sass/_theme/sections/diplomas.sass b/assets/sass/_theme/sections/diplomas.sass
index 6063a0418..33d8d4b02 100644
--- a/assets/sass/_theme/sections/diplomas.sass
+++ b/assets/sass/_theme/sections/diplomas.sass
@@ -27,6 +27,7 @@ ul.diplomas
     .dropdown-menu
         @include inset(100%, 0, auto, auto)
         background-color: black
+        display: none
         position: absolute
         @include media-breakpoint-down(md)
             // padding-left: $container-gutter-width
@@ -34,8 +35,8 @@ ul.diplomas
         &,
         a
             color: white
-            display: block
         a
+            display: block
             padding: $spacing0
             white-space: normal
             &:not(:first-child)
@@ -45,4 +46,21 @@ ul.diplomas
             &:hover
                 background-color: lighten(black, 3)
             &:focus
-                color: black
\ No newline at end of file
+                color: black
+
+    button[aria-expanded="true"] 
+        @include icon('caret-top', 'after')
+        + .dropdown-menu
+            display: block
+
+    
+    // TODO : style de l'icone
+    // button::after,
+    // button[aria-expanded="true"]::after
+    //     display: inline-block
+    //     font-family: Icon
+    //     font-size: .375rem
+    //     font-weight: 400
+    //     line-height: 1
+    //     margin-left: 0.3125rem
+    //     vertical-align: middle
\ No newline at end of file

From ea62ca99ef8550a47da111c1e69a5251659dee9b Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Fri, 29 Jul 2022 15:52:35 +0200
Subject: [PATCH 2/2] Removed class and tests

---
 assets/js/theme/design-system/dropdown.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/assets/js/theme/design-system/dropdown.js b/assets/js/theme/design-system/dropdown.js
index 6eee0c0f5..95b8b6280 100644
--- a/assets/js/theme/design-system/dropdown.js
+++ b/assets/js/theme/design-system/dropdown.js
@@ -1,7 +1,3 @@
-const CLASSES = {
-    DropdownOpened: 'is-opened'
-};
-
 class Dropdown {
     constructor (selector) {
         this.element = document.querySelector(selector);
@@ -26,7 +22,6 @@ class Dropdown {
         this.state.isOpened = open;
         classAction = this.state.isOpened ? 'add' : 'remove';
         this.dropdownButton.setAttribute('aria-expanded', this.state.isOpened);
-        this.element.classList[classAction](CLASSES.DropdownOpened);
     }
 }