chore(documentation): update design system team in footer (#3706)

Co-authored-by: Alizé Debray <[email protected]>
swisspost · Oct 15, 2024 · 47c1637 · 47c1637
1 parent 8163e97
commit 47c1637
Show file tree

Hide file tree

Showing 2 changed files with 148 additions and 33 deletions.
diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
@@ -1,26 +1,78 @@
 import React from 'react';
 
-interface Developer {
+interface TeamMember {
   name: string;
   title: string;
-  avatar: string;
+  githubImageId: string;
+  githubUsername: string;
 }
 
-const DEVELOPERS: Developer[] = [
+const TEAM_MEMBERS: TeamMember[] = [
   {
     name: 'Philipp Gfeller',
-    title: 'Lead UI Developer',
-    avatar: 'https://avatars.githubusercontent.com/u/1659006?v=4',
+    title: 'Lead Potato',
+    githubImageId: '1659006',
+    githubUsername: 'gfellerph',
   },
   {
     name: 'Alizé Debray',
-    title: 'UI Developer',
-    avatar: 'https://avatars.githubusercontent.com/u/33580481?v=4',
+    title: 'UI Mademoiselle',
+    githubImageId: '33580481',
+    githubUsername: 'alizedebray',
   },
   {
     name: 'Oliver Schürch',
+    title: 'Señor Developer',
+    githubImageId: '9716662',
+    githubUsername: 'oliverschuerch',
+  },
+  {
+    name: 'Myrta Sakellariou',
+    title: 'Mama Pigxel',
+    githubImageId: '66249294',
+    githubUsername: 'myrta2302',
+  },
+  {
+    name: 'Lea Gardavaud',
+    title: 'UI Developer',
+    githubImageId: '183501002',
+    githubUsername: 'leagrdv',
+  },
+  {
+    name: 'Alona Zherdetska',
+    title: 'Component Fairy',
+    githubImageId: '138328641',
+    githubUsername: 'alionazherdetska',
+  },
+  {
+    name: 'Tim Schär',
     title: 'UI Developer',
-    avatar: 'https://avatars.githubusercontent.com/u/9716662?v=4',
+    githubImageId: '59233938',
+    githubUsername: 'schaertim',
+  },
+  {
+    name: 'Rouven Steiger',
+    title: 'Art Guy EDK',
+    githubImageId: '104423005',
+    githubUsername: 'rouvenpost',
+  },
+  {
+    name: 'Christian Zundel',
+    title: 'UX Designer',
+    githubImageId: '119845956',
+    githubUsername: 'Cian77',
+  },
+  {
+    name: 'Alessio Travaglini',
+    title: 'Token Orchestrator',
+    githubImageId: '158268546',
+    githubUsername: 'Vandapanda',
+  },
+  {
+    name: 'Romain Veya',
+    title: 'UI Developer',
+    githubImageId: '111903046',
+    githubUsername: 'veyaromain',
   },
 ];
 
@@ -43,20 +95,25 @@ 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">
-              {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>
-                    </p>
-                    <p>{developer.title}</p>
-                  </div>
-                </article>
+            <h2 className="mt-0">Design System Team Members</h2>
+            <ul className="list-profile">
+              {TEAM_MEMBERS.sort(() => (Math.random() > 0.5 ? 1 : -1)).map((developer, index) => (
+                <li key={index}>
+                  <a className="avatar" href={`https://github.com/${developer.githubUsername}`}>
+                    <div className="avatar-image">
+                      <img
+                        src={`https://avatars.githubusercontent.com/u/${developer.githubImageId}?v=4`}
+                        alt={developer.name}
+                      />
+                    </div>
+                    <div className="avatar-description">
+                      <span>{developer.title}</span>
+                      <span>{developer.name}</span>
+                    </div>
+                  </a>
+                </li>
               ))}
-            </div>
+            </ul>
             <div className="row mt-regular-r">
               <div className="col-12 col-rg-auto mt-regular-r">
                 <a

diff --git a/packages/documentation/.storybook/blocks/layout/layout.scss b/packages/documentation/.storybook/blocks/layout/layout.scss
@@ -40,22 +40,80 @@
 }
 
 .docs-footer {
+  ul.list-profile {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem 1.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
   .avatar {
-    display: flex;
-    align-items: flex-start;
+    display: inline-flex;
+    gap: calc(1rem - 6px * 2);
+    align-items: center;
+    text-decoration: none;
+
+    .avatar-image {
+      border-radius: 50%;
 
-    p {
-      margin-bottom: 0.25rem;
+      img {
+        display: block;
+        position: relative;
+        box-sizing: content-box;
+        z-index: 2;
+        width: 4rem;
+        border: 6px solid transparent;
+        border-radius: inherit;
+      }
     }
-  }
 
-  .profile-picture {
-    width: 5rem;
-    border-radius: 50%;
-    margin-right: 1rem;
-  }
+    .avatar-description {
+      position: relative;
+      padding: 10px;
+      border-radius: 4px;
+
+      span {
+        display: block;
+        position: relative;
+        z-index: 2;
+        font-size: 1rem;
+        line-height: 1.2;
 
-  .profile-list {
-    gap: 2rem 4rem;
+        &:first-child {
+          font-weight: bold;
+          font-size: 0.6875rem;
+        }
+      }
+
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        inset: 0;
+        left: calc(-1rem * 2);
+        z-index: 1;
+        border-radius: 4px;
+      }
+    }
+
+    &:hover {
+      .avatar-image {
+        box-shadow: 0.25px 1px 1px rgba(0, 0, 0, 0.1), 1px 2px 2.5px 1px rgba(0, 0, 0, 0.2);
+
+        img {
+          border-color: white;
+        }
+      }
+
+      .avatar-description {
+        &::after {
+          background-color: white;
+          box-shadow: 0.25px 1px 1px rgba(0, 0, 0, 0.1), 1px 2px 2.5px 1px rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
   }
 }