Feat/badges

[andrewleith]

Summary | Résumé

This PR adds a new badge component, and updates the radio component to be able to be bordered, and/or contain badges.

Badge component

Bordered radio

Bordered radio with badges

Test instructions | Instructions pour tester la modification

• View storybook pages for each, ensure they render correctly
  • Badges: https://2nni67yvhwaxkebn3myrqmdyxy0cbweg.lambda-url.ca-central-1.on.aws/_storybook?component=badge
  • Radios: https://2nni67yvhwaxkebn3myrqmdyxy0cbweg.lambda-url.ca-central-1.on.aws/_storybook?component=radios

[github-actions]

🧪 Review environment

https://2nni67yvhwaxkebn3myrqmdyxy0cbweg.lambda-url.ca-central-1.on.aws/

[Copilot]

Pull Request Overview

This PR adds a new Badge component and extends the Radios (and underlying select) component to support optional borders and badges.

• Introduce a badge macro and storybook page showcasing its variants and usage.
• Enhance select/select_input to accept badge_options and bordered flags, and update radios/radio macros accordingly.
• Wire up three example WTForms RadioField forms in storybook routing to demonstrate the new features.

Reviewed Changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
app/templates/views/storybook-menu.html	Add “Badge” entry to the storybook navigation menu.
app/templates/views/storybook/radios.html	Storybook examples for basic, bordered, and badged radios.
app/templates/views/storybook/badge.html	New storybook page demonstrating Badge component usage.
app/templates/components/select-input.html	Extend select and select_input macros with badge_options and bordered.
app/templates/components/radios.html	Update radios and radio macros to pass through new options.
app/templates/components/badge.html	Implement the badge macro.
app/main/views/storybook.py	Define three example forms and pass them into storybook route.
app/assets/stylesheets/index.css	Adjust PurgeCSS ignore comments around large CSS block.

Comments suppressed due to low confidence (2)

app/main/views/storybook.py:8

• [nitpick] Class names should follow PascalCase. Rename Exampleform1 to ExampleForm1 (and similarly for Exampleform2/Exampleform3).

class Exampleform1(Form):

app/templates/components/radios.html:18

• [nitpick] The radio macro accepts badge_options but not bordered, leading to inconsistency with radios and select_input. Consider adding a bordered parameter here or removing badge_options if it’s never used standalone.

{% macro radio(option, disable=[], option_hints={}, data_target=None, as_list_item=False, badge_options=None) %}

[Copilot]

Accessing badge_options[option.data] directly will raise a KeyError for options without badges. Use badge_options.get(option.data) or check option.data in badge_options first.

Suggested change

	{% if badge_options and badge_options[option.data] %}
	{{ badge(badge_options[option.data][0], badge_options[option.data][1], extra_class="float-right") }}
	{% if badge_options and badge_options.get(option.data) %}
	{{ badge(badge_options.get(option.data)[0], badge_options.get(option.data)[1], extra_class="float-right") }}

[amazingphilippe]

Suggested change

	"Receive a code by email","FR Receive a code by email"
	"Receive a code by text message","FR Receive a code by text message"
	"Receive a code by email","Recevoir un code par courriel"
	"Receive a code by text message","Recevoir un code par message texte"

[amazingphilippe]

Looks good! Added some nicer FR translations