Story 2212: Contributors List Component

core/views.py

@@ -1567,6 +1567,30 @@ def get_context_data(self, **kwargs):
             },
         ]
 
+        context["contributor_data"] = 10 * [
+            {
+                "name": "John Doe",
+                "profile_url": "#",
+                "role": "Author",
+                "avatar_url": f"{settings.STATIC_URL}img/v3/demo_page/Avatar.png",
+                "badge_url": f"{settings.STATIC_URL}img/v3/badges/badge-first-place.png",
+                "badge": "",
+                "bio": "",
+            }
+        ] + 10 * [
+            {
+                "name": "Richard Thomson",
+                "profile_url": "#",
+                "role": "Contributor",
+                "avatar_url": "",
+                "badge_url": f"{settings.STATIC_URL}img/v3/badges/badge-bronze.png",
+                "badge": "",
+                "bio": "",
+            }
+        ]
+
+        context["release_contributor_data"] = context["contributor_data"][:8]
+
         latest = Version.objects.most_recent()
         if latest:
             lv = (

static/css/v3/card.css

@@ -70,6 +70,7 @@
 .card__hr {
   width: 100%;
   height: 1px;
+  min-height: 1px;
   background: var(--color-stroke-weak);
   border: none;
   margin: 0;

static/css/v3/components.css

@@ -42,3 +42,4 @@
 @import "./markdown-card.css";
 @import "./user-profile.css";
 @import "./user-card.css";
+@import "./contributors-list.css";

static/css/v3/contributors-list.css

@@ -0,0 +1,28 @@
+.contributors-list :is(h2, h3, h4, h5, h6) {
+    margin: 0;
+}
+
+.contributors-list .card__column {
+    gap: var(--space-medium);
+}
+
+.contributors-list.all-contributors {
+    max-width: 100%;
+}
+
+.contributors-list.all-contributors .card__column {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--space-medium);
+}
+
+@media (max-width: 768px) {
+    .contributors-list.all-contributors .card__column {
+        grid-template-columns: 1fr;
+        overflow-y: auto;
+    }
+
+    .contributors-list {
+        max-height: 80vh;
+    }
+}

templates/v3/examples/_v3_example_section.html

@@ -684,6 +684,24 @@ <h3>{{ section_title }}</h3>
     </div>
   {% endwith %}
 
+   {% with contributors=release_contributor_data section_title="Contributors List (release)" %}
+    <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
+      <h3>{{ section_title }}</h3>
+      <div class="v3-examples-section__example-box">
+        {% include "v3/includes/_contributors_list.html" with title="Contributors: This Release" variant="release" contributors=contributors %}
+      </div>
+    </div>
+  {% endwith %}
+
+  {% with contributors=contributor_data section_title="Contributors List (all)" %}
+    <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
+      <h3>{{ section_title }}</h3>
+      <div class="v3-examples-section__example-box">
+        {% include "v3/includes/_contributors_list.html" with title="All Contributors" variant="all" contributors=contributors %}
+      </div>
+    </div>
+  {% endwith %}
+
   {% comment %}
   Position Fixed dark mode toggle for quick theme switching without scrolling to the header.
   {% endcomment %}

templates/v3/includes/_contributors_list.html

@@ -0,0 +1,35 @@
+{% comment %}
+  Vertical list showing all contributors to a library or release.
+  Has two variants: Contributors in release, or all contributors. The release variant is a single column,
+  all contributors is a differing number of columns depending on screen size.
+
+  Inputs:
+    - title: str, required - top title of card
+    - variant: str, required - choice of release or all, determines display layout
+    - contributors: list, required - List of contributors, matching the author input of _user_profile.html
+    - heading_level: int, optional - Set the semantic leve of the heading, defaults to 2, does not allow for h1
+
+  Usage:
+    {% include "v3/includes/_contributors_list.html" with title="Contributors: This Release" variant="release" contributors=contributors %}
+{% endcomment %}
+<div class="basic-card card py-large contributors-list {% if variant == 'all' %} all-contributors {% endif %}">
+  <div class="card__header">
+    {% if heading_level == '2' or not heading_level %}
+      <h2 class="card__title">{{ title }}</h2>
+    {% elif heading_level == '3'  %}
+      <h3 class="card__title">{{ title }}</h3>
+    {% elif heading_level == '4'  %}
+      <h4 class="card__title">{{ title }}</h4>
+    {% elif heading_level == '5'  %}
+      <h5 class="card__title">{{ title }}</h5>
+    {% elif heading_level == '6'  %}
+      <h6 class="card__title">{{ title }}</h6>
+    {% endif %}
+  </div>
+  <hr class="card__hr" />
+  <div class="card__column px-large">
+    {% for contributor in contributors %}
+        {% include "v3/includes/_user_profile.html" with author=contributor only %}
+    {% endfor %}
+  </div>
+</div>

templates/v3/includes/_user_profile.html

@@ -14,10 +14,10 @@
 <div class="user-profile{% if author.bio %} user-profile--has-bio{% endif %}" role="group" aria-label="{{ author.name }}">
   {% if author.profile_url %}
     <a href="{{ author.profile_url }}" class="user-profile__avatar-link">
-      {% include "v3/includes/_avatar_v3.html" with src=author.avatar_url name=author.name size="xl" %}
+      {% include "v3/includes/_avatar_v3.html" with src=author.avatar_url name=author.name size="xl" only %}
     </a>
   {% else %}
-    {% include "v3/includes/_avatar_v3.html" with src=author.avatar_url name=author.name size="xl" %}
+    {% include "v3/includes/_avatar_v3.html" with src=author.avatar_url name=author.name size="xl" only %}
   {% endif %}
 
   <div class="user-profile__content">