From 7e9ebd0f227ca9dfafbaa629764d1ed806b7b4d4 Mon Sep 17 00:00:00 2001
From: Mathis Chambon <matchambon60@gmail.com>
Date: Wed, 19 Jun 2024 10:49:39 +0200
Subject: [PATCH 1/6] feat(scroll): add page scroll

---
 components/Atoms/Scroll/Scroll.stories.js |  7 ++++
 components/Atoms/Scroll/Scroll.twig       |  8 ++++
 components/base.css                       | 46 +++++++++++++++++++----
 3 files changed, 53 insertions(+), 8 deletions(-)
 create mode 100644 components/Atoms/Scroll/Scroll.stories.js
 create mode 100644 components/Atoms/Scroll/Scroll.twig

diff --git a/components/Atoms/Scroll/Scroll.stories.js b/components/Atoms/Scroll/Scroll.stories.js
new file mode 100644
index 0000000..985b2f0
--- /dev/null
+++ b/components/Atoms/Scroll/Scroll.stories.js
@@ -0,0 +1,7 @@
+import Scroll from './Scroll.twig';
+
+export default {
+  title: 'Design System/Atoms/Scroll'
+};
+
+export const pageScroll = () => Scroll();
diff --git a/components/Atoms/Scroll/Scroll.twig b/components/Atoms/Scroll/Scroll.twig
new file mode 100644
index 0000000..be87a32
--- /dev/null
+++ b/components/Atoms/Scroll/Scroll.twig
@@ -0,0 +1,8 @@
+<h1 class="h1 text-center mb-4">Page Scroll</h1>
+
+<div class="mx-auto w-1/2 max-h-[300px] overflow-y-auto bg-blue-300 p-4">
+  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+</div>
diff --git a/components/base.css b/components/base.css
index f68e4f5..c11d099 100644
--- a/components/base.css
+++ b/components/base.css
@@ -1,13 +1,13 @@
-@import "variables.css";
-@import "../assets/css/*.css";
-@import url("./**/*.css");
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap");
+@import 'variables.css';
+@import '../assets/css/*.css';
+@import url('./**/*.css');
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap');
 
 body {
-  font-family: "Poppins", "Roboto", serif;
+  font-family: 'Poppins', 'Roboto', serif;
   color: var(--grey-dark);
 }
 
@@ -15,3 +15,33 @@ svg {
   width: 100%;
   height: 100%;
 }
+
+*::-webkit-scrollbar {
+  width: 7px;
+}
+
+*::-webkit-scrollbar-track {
+  border-radius: 0px;
+  background-color: #d6d6d6;
+}
+
+*::-webkit-scrollbar-track:hover {
+  background-color: #d6d6d6;
+}
+
+*::-webkit-scrollbar-track:active {
+  background-color: #d6d6d6;
+}
+
+*::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+  background-color: #fa533c;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: #fa533c;
+}
+
+*::-webkit-scrollbar-thumb:active {
+  background-color: #fa533c;
+}

From 19fec385ef6403b4c7bd98174a75e32ed507bf6a Mon Sep 17 00:00:00 2001
From: Mathis Chambon <matchambon60@gmail.com>
Date: Fri, 21 Jun 2024 10:44:59 +0200
Subject: [PATCH 2/6] feat(scroll): contextual scroll

---
 components/Atoms/Scroll/Scroll.stories.js |  2 +-
 components/Atoms/Scroll/Scroll.twig       | 27 ++++++++++++++++++-----
 components/base.css                       | 26 +++++++++++-----------
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/components/Atoms/Scroll/Scroll.stories.js b/components/Atoms/Scroll/Scroll.stories.js
index 985b2f0..bee6187 100644
--- a/components/Atoms/Scroll/Scroll.stories.js
+++ b/components/Atoms/Scroll/Scroll.stories.js
@@ -4,4 +4,4 @@ export default {
   title: 'Design System/Atoms/Scroll'
 };
 
-export const pageScroll = () => Scroll();
+export const base = () => Scroll();
diff --git a/components/Atoms/Scroll/Scroll.twig b/components/Atoms/Scroll/Scroll.twig
index be87a32..c5be6e3 100644
--- a/components/Atoms/Scroll/Scroll.twig
+++ b/components/Atoms/Scroll/Scroll.twig
@@ -1,8 +1,23 @@
-<h1 class="h1 text-center mb-4">Page Scroll</h1>
+<div class="flex gap-12">
+  <div class="flex grow flex-col gap-4">
+    <h1 class="h1 text-center mb-4">Page Scroll</h1>
 
-<div class="mx-auto w-1/2 max-h-[300px] overflow-y-auto bg-blue-300 p-4">
-  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4">
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+    </div>
+  </div>
+
+  <div class="flex grow flex-col gap-4 contextual-scroll">
+    <h1 class="h1 text-center mb-4">Contextual Scroll</h1>
+
+    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4">
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+    </div>
+  </div>
 </div>
diff --git a/components/base.css b/components/base.css
index c11d099..913d0fb 100644
--- a/components/base.css
+++ b/components/base.css
@@ -25,23 +25,23 @@ svg {
   background-color: #d6d6d6;
 }
 
-*::-webkit-scrollbar-track:hover {
-  background-color: #d6d6d6;
-}
-
-*::-webkit-scrollbar-track:active {
-  background-color: #d6d6d6;
-}
-
 *::-webkit-scrollbar-thumb {
   border-radius: 0px;
   background-color: #fa533c;
 }
 
-*::-webkit-scrollbar-thumb:hover {
-  background-color: #fa533c;
-}
+.contextual-scroll {
+  ::-webkit-scrollbar {
+    width: 7px;
+  }
 
-*::-webkit-scrollbar-thumb:active {
-  background-color: #fa533c;
+  ::-webkit-scrollbar-track {
+    border-radius: 0px;
+    background-color: #d6d6d6;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 0px;
+    background-color: var(--grey-dark);
+  }
 }

From 207b257a4334fb9c52eb5aad60e531c9901e6fe4 Mon Sep 17 00:00:00 2001
From: Mathis Chambon <matchambon60@gmail.com>
Date: Mon, 24 Jun 2024 16:10:32 +0200
Subject: [PATCH 3/6] feat(scroll): scroll update

---
 components/Atoms/Scroll/Scroll.twig | 11 -----------
 components/base.css                 | 26 +++++---------------------
 2 files changed, 5 insertions(+), 32 deletions(-)

diff --git a/components/Atoms/Scroll/Scroll.twig b/components/Atoms/Scroll/Scroll.twig
index c5be6e3..58ff8eb 100644
--- a/components/Atoms/Scroll/Scroll.twig
+++ b/components/Atoms/Scroll/Scroll.twig
@@ -9,15 +9,4 @@
       <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
     </div>
   </div>
-
-  <div class="flex grow flex-col gap-4 contextual-scroll">
-    <h1 class="h1 text-center mb-4">Contextual Scroll</h1>
-
-    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4">
-      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-    </div>
-  </div>
 </div>
diff --git a/components/base.css b/components/base.css
index 913d0fb..25c1ee9 100644
--- a/components/base.css
+++ b/components/base.css
@@ -16,32 +16,16 @@ svg {
   height: 100%;
 }
 
-*::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 7px;
 }
 
-*::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
   border-radius: 0px;
-  background-color: #d6d6d6;
+  background-color: var(--grey-lighter);
 }
 
-*::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
   border-radius: 0px;
-  background-color: #fa533c;
-}
-
-.contextual-scroll {
-  ::-webkit-scrollbar {
-    width: 7px;
-  }
-
-  ::-webkit-scrollbar-track {
-    border-radius: 0px;
-    background-color: #d6d6d6;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 0px;
-    background-color: var(--grey-dark);
-  }
+  background-color: var(--grey-dark);
 }

From 2d7aafe21b84352241ecd73a949dbe03348b14ad Mon Sep 17 00:00:00 2001
From: Mathis Chambon <matchambon60@gmail.com>
Date: Thu, 27 Jun 2024 11:34:57 +0200
Subject: [PATCH 4/6] =?UTF-8?q?feat(scroll):=20firefox=20compatibilit?=
 =?UTF-8?q?=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Atoms/Scroll/Scroll.twig | 2 +-
 components/base.css                 | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/Atoms/Scroll/Scroll.twig b/components/Atoms/Scroll/Scroll.twig
index 58ff8eb..757787c 100644
--- a/components/Atoms/Scroll/Scroll.twig
+++ b/components/Atoms/Scroll/Scroll.twig
@@ -2,7 +2,7 @@
   <div class="flex grow flex-col gap-4">
     <h1 class="h1 text-center mb-4">Page Scroll</h1>
 
-    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4">
+    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4 scorlll">
       <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
       <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
       <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
diff --git a/components/base.css b/components/base.css
index 25c1ee9..7fa8221 100644
--- a/components/base.css
+++ b/components/base.css
@@ -29,3 +29,8 @@ svg {
   border-radius: 0px;
   background-color: var(--grey-dark);
 }
+
+.scorlll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--grey-dark) var(--grey-lighter);
+}

From 06e21bd618c2859ce1543d9bf8d61c4e1f565736 Mon Sep 17 00:00:00 2001
From: Mathis Chambon <matchambon60@gmail.com>
Date: Thu, 27 Jun 2024 11:50:20 +0200
Subject: [PATCH 5/6] feat(scroll): firefox compatibility

---
 components/base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/base.css b/components/base.css
index 7fa8221..cd51d03 100644
--- a/components/base.css
+++ b/components/base.css
@@ -30,7 +30,7 @@ svg {
   background-color: var(--grey-dark);
 }
 
-.scorlll {
+* {
   scrollbar-width: thin;
   scrollbar-color: var(--grey-dark) var(--grey-lighter);
 }

From a33695276b0919ca795663670fe5c55247deefb5 Mon Sep 17 00:00:00 2001
From: Mathis Chambon <matchambon60@gmail.com>
Date: Thu, 27 Jun 2024 14:43:55 +0200
Subject: [PATCH 6/6] fix(scroll): remove useless class

---
 components/Atoms/Scroll/Scroll.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Atoms/Scroll/Scroll.twig b/components/Atoms/Scroll/Scroll.twig
index 757787c..58ff8eb 100644
--- a/components/Atoms/Scroll/Scroll.twig
+++ b/components/Atoms/Scroll/Scroll.twig
@@ -2,7 +2,7 @@
   <div class="flex grow flex-col gap-4">
     <h1 class="h1 text-center mb-4">Page Scroll</h1>
 
-    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4 scorlll">
+    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4">
       <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
       <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
       <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>