From 2eefe238ccb4c1d4a41814259359f8880e49f384 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Wed, 9 Oct 2024 16:53:05 +0200
Subject: [PATCH] chore(documentation): update design system team in footer

---
 .../.storybook/blocks/footer.tsx              | 57 +++++++++++++++++--
 .../.storybook/blocks/layout/layout.scss      | 12 +++-
 2 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
index a64503e76b..9f4c8a0658 100644
--- a/packages/documentation/.storybook/blocks/footer.tsx
+++ b/packages/documentation/.storybook/blocks/footer.tsx
@@ -9,7 +9,7 @@ interface Developer {
 const DEVELOPERS: Developer[] = [
   {
     name: 'Philipp Gfeller',
-    title: 'Lead UI Developer',
+    title: 'Lead Potato',
     avatar: 'https://avatars.githubusercontent.com/u/1659006?v=4',
   },
   {
@@ -19,9 +19,54 @@ const DEVELOPERS: Developer[] = [
   },
   {
     name: 'Oliver Schürch',
-    title: 'UI Developer',
+    title: 'Señor Developer',
     avatar: 'https://avatars.githubusercontent.com/u/9716662?v=4',
   },
+  {
+    name: 'Myrta Sakellariou',
+    title: 'UI Developer',
+    avatar: 'https://avatars.githubusercontent.com/u/66249294?v=4',
+  },
+  {
+    name: 'Lea Gardavaud',
+    title: 'UI Developer',
+    avatar: 'https://avatars.githubusercontent.com/u/183501002?v=4',
+  },
+  {
+    name: 'Alona Zherdetska',
+    title: 'Cookie Master',
+    avatar: 'https://avatars.githubusercontent.com/u/138328641?v=4',
+  },
+  {
+    name: 'Tim Schär',
+    title: 'UI Developer',
+    avatar: 'https://avatars.githubusercontent.com/u/59233938?v=4',
+  },
+  {
+    name: 'Rouven Steiger',
+    title: 'UI Designer',
+    avatar: 'https://avatars.githubusercontent.com/u/104423005?v=4',
+  },
+  {
+    name: 'Christian Zundel',
+    title: 'UX Designer',
+    avatar: 'https://avatars.githubusercontent.com/u/119845956?v=4',
+  },
+  {
+    name: 'Alessio Travaglini',
+    title: 'Token Orchestrator',
+    avatar: 'https://avatars.githubusercontent.com/u/158268546?v=4',
+  },
+  // {
+  //   name: 'Sandra Hohl',
+  //   title: 'UX Developer',
+  //   avatar: 'https://avatars.githubusercontent.com/u/175929675?v=4',
+  // },
+  // {
+  //   name: 'Romain Veya',
+  //   title: 'UI Developer',
+  //   avatar: 'https://avatars.githubusercontent.com/u/111903046?v=4',
+  // },
 ];
 
 const BASEURL = 'https://github.com/swisspost/design-system/tree/main/packages/documentation';
@@ -43,16 +88,16 @@ export default (params: { pathToStoryFile?: String }) => (
       <div className="bg-light">
         <div className="container">
           <div className="pt-big-r pb-big-r">
-            <h2 className="mt-0">Support</h2>
-            <div className="d-flex flex-wrap mt-huge-r mb-huge-r profile-list">
+            <h2 className="mt-0">Design System Team</h2>
+            <div className="d-flex flex-wrap justify-content-around mt-huge-r mb-huge-r profile-list">
               {DEVELOPERS.sort(() => (Math.random() > 0.5 ? 1 : -1)).map((developer, index) => (
                 <article key={index} className="avatar">
                   <img className="profile-picture" src={developer.avatar} alt="" />
                   <div>
                     <p>
-                      <strong>{developer.name}</strong>
+                      <strong>{developer.title}</strong>
                     </p>
-                    <p>{developer.title}</p>
+                    <p>{developer.name}</p>
                   </div>
                 </article>
               ))}
diff --git a/packages/documentation/.storybook/blocks/layout/layout.scss b/packages/documentation/.storybook/blocks/layout/layout.scss
index 9e4525f84a..a1f8ea0bf8 100644
--- a/packages/documentation/.storybook/blocks/layout/layout.scss
+++ b/packages/documentation/.storybook/blocks/layout/layout.scss
@@ -42,15 +42,21 @@
 .docs-footer {
   .avatar {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
 
     p {
-      margin-bottom: 0.25rem;
+      font-size: 1rem;
+      line-height: 1;
+
+      &:first-child {
+        font-size: 0.85rem;
+        margin-bottom: 0.25rem;
+      }
     }
   }
 
   .profile-picture {
-    width: 5rem;
+    width: 4rem;
     border-radius: 50%;
     margin-right: 1rem;
   }