Story 2191: Button Badge Component

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

@@ -44,3 +44,4 @@
 @import "./user-card.css";
 @import "./post-filter.css";
 @import "./library-filter.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 radio_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,31 @@
+{% comment %}
+    Badges Button Component. Intended to be used as part of a group of inputs to select a badge.
+
+    Inputs:
+        name: str, required: group name for the radios. Should be the same for all components
+        value: str, required: radio value for selection
+        icon_src: str, required: full src link for icon for badge
+        id: str, optional: id for linking the label to the radio button. Will be auto generated if not provided
+        radio_checked: bool, optional: Set to true if the value should be preselected
+
+    Usage:
+        Checked:
+            {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src radio_checked=True only %}
+        Unchecked
+            {% include "v3/includes/_badge_button.html" with name="badge-select" value="gold" icon_src=icon_src only %}
+{% 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}}"
+        aria-checked="{{radio_checked|yesno:"true,false"|default:"false"}}"
+        {% if radio_checked %} checked {% endif %}
+    />
+    <label for="{{id|default:uuid}}"><img src="{{ icon_src }}" alt="" width="32" height="32"></label>
+</div>