Story 2191: Button Badge Component

Author: jlchilders11

core/templatetags/core_tags.py

@@ -0,0 +1,9 @@
+import uuid
+from django import template
+
+register = template.Library()
+
+
+@register.simple_tag
+def generate_uuid():
+    return uuid.uuid4()

static/css/v3/badge-button.css

@@ -0,0 +1,32 @@
+.badge-button__radio {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.badge-button {
+    width: fit-content;
+    height: fit-content;
+    padding: 2px;
+    display: inline-block;
+}
+
+.badge-button:has(.badge-button__radio:checked)  {
+        border-radius: var(--border-radius-m);
+        border: 1px solid var(--color-stroke-mid);
+        background: var(--color-surface-weak);
+        padding: 1px;
+}
+
+.badge-button:hover {
+    border-radius: var(--border-radius-m);
+    border: 1px solid var(--color-stroke-strong);
+    background: var(--color-surface-mid);
+    padding: 1px;
+}

static/css/v3/components.css

@@ -45,3 +45,4 @@
 @import "./post-filter.css";
 @import "./library-filter.css";
 @import "./contributors-list.css";
+@import "./badge-button.css";

templates/v3/examples/_v3_example_section.html

@@ -30,6 +30,7 @@ <h3>{{ section_title }}</h3>
   - Styles: static/css/v3/v3-examples-section.css — h3 headings inside
     __block are styled via the structural selector (no class needed).
 {% endcomment %}
+{% load static %}
 <section class="v3-examples-section" aria-labelledby="v3-examples-heading">
   <h2 id="v3-examples-heading" class="v3-examples-section__heading">V3 Examples for testing</h2>
 
@@ -66,6 +67,18 @@ <h3>{{ section_title }}</h3>
     </div>
   {% endwith %}
 
+  {% with section_title="Badge Buttons" %}
+    <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
+      <h3>{{ section_title }}</h3>
+      {% static "img/v3/badges/badge-gold-medal.png" as icon_src %}
+      <div class="v3-examples-section__example-box">
+        {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src only %}
+        {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src checked=True only %}
+        {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src only %}
+      </div>
+    </div>
+  {% endwith %}
+
   {% with section_title="Avatar" %}
     <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
       <h3>{{ section_title }}</h3>

templates/v3/includes/_badge_button.html

@@ -0,0 +1,9 @@
+{% comment %}
+{% endcomment %}
+{% load core_tags %}
+
+{% generate_uuid as uuid %}
+<div class="badge-button">
+<input class="badge-button__radio" type="radio" name="{{name}}" value="{{value}}" id="{{id|default:uuid}}" {% if checked %}checked{% endif %} />
+<label for="{{id|default:uuid}}"><img src="{{ icon_src }}" alt="" width="32" height="32"></label>
+</div>