From ba2de84ff9504edbe6e978aa6e3c86741ae1f53a Mon Sep 17 00:00:00 2001
From: igorkorenfeld <igor.korenfeld@gsa.gov>
Date: Wed, 9 Nov 2022 16:52:39 -0500
Subject: [PATCH] Change org type button to usa-radio style

---
 src/registrar/forms/application_wizard.py     |  2 +-
 .../templates/application_organization.html   | 36 ++++++++++++-------
 .../templates/includes/radio_button.html      | 14 ++++----
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/registrar/forms/application_wizard.py b/src/registrar/forms/application_wizard.py
index 5d25eb8fe..a9a14ea35 100644
--- a/src/registrar/forms/application_wizard.py
+++ b/src/registrar/forms/application_wizard.py
@@ -57,7 +57,7 @@ class OrganizationForm(forms.Form):
             ("Yes", "Yes"),
             ("No", "No"),
         ],
-        widget=forms.RadioSelect,
+        widget=forms.RadioSelect(attrs={"class":"usa-radio__input"}),
     )
 
 
diff --git a/src/registrar/templates/application_organization.html b/src/registrar/templates/application_organization.html
index 4c562d96c..0775540a9 100644
--- a/src/registrar/templates/application_organization.html
+++ b/src/registrar/templates/application_organization.html
@@ -12,37 +12,49 @@
   {% radio_buttons_by_value wizard.form.organization_type as choices %}
 
   <fieldset id="organization_type__fieldset" class="usa-fieldset">
-    <legend>
+    <legend class="usa-legend">
       <h2> What kind of government organization do you represent?</h2>
     </legend>
     {{ wizard.form.organization_type.errors }}
-    {% include "includes/radio_button.html" with choice=choices.Federal %}
-    {% include "includes/radio_button.html" with choice=choices.Interstate %}
-    {% include "includes/radio_button.html" with choice=choices.State_or_Territory %}
-    {% include "includes/radio_button.html" with choice=choices.Tribal %}
-    {% include "includes/radio_button.html" with choice=choices.County %}
-    {% include "includes/radio_button.html" with choice=choices.City %}
-    {% include "includes/radio_button.html" with choice=choices.Special_District %}
+    {% include "includes/radio_button.html" with choice=choices.Federal tile="true" %}
+    {% include "includes/radio_button.html" with choice=choices.Interstate tile="true" %}
+    {% include "includes/radio_button.html" with choice=choices.State_or_Territory tile="true" %}
+    {% include "includes/radio_button.html" with choice=choices.Tribal tile="true" %}
+    {% include "includes/radio_button.html" with choice=choices.County tile="true" %}
+    {% include "includes/radio_button.html" with choice=choices.City tile="true" %}
+    {% include "includes/radio_button.html" with choice=choices.Special_District tile="true" %}
   </fieldset>
 
   <fieldset id="federal_type__fieldset" {% trigger wizard.form.federal_type choices.Federal %} class="usa-fieldset">
-    <legend>
+    <legend class="usa-legend">
       <h2> Which federal branch does your organization belong to?</h2>
     </legend>
     <noscript>
       Only required if you selected "Federal".
     </noscript>
-    {{ wizard.form.federal_type|add_class:"usa-radio" }}
+    {% radio_buttons_by_value wizard.form.federal_type as federal_choices %}
+    {% include "includes/radio_button.html" with choice=federal_choices.Executive%}
+    {% include "includes/radio_button.html" with choice=federal_choices.Judicial%}
+    {% include "includes/radio_button.html" with choice=federal_choices.Legislative%}
   </fieldset>
 
   <fieldset id="is_election_board__fieldset" {% trigger wizard.form.is_election_board choices.Tribal choices.County choices.City choices.Special_District%} class="usa-fieldset">
-    <legend>
+    <legend class="usa-legend">
       <h2> Is your organization an election office?</h2>
     </legend>
     <noscript>
       Only required if you selected "Tribal", "County", "City" or "Special District".
     </noscript>
-    {{ wizard.form.is_election_board|add_class:"usa-radio" }}
+    {% for radio in wizard.form.is_election_board %}
+      <div class="usa-radio"> 
+        {{radio.tag}}
+        <label for="{{radio.id_for_label}}" class="usa-radio__label"> 
+          {{ radio.choice_label }}
+        </label>
+      </div>
+    {% endfor %}
+    <!-- {{ wizard.form.is_election_board|add_label_class:"usa-label" }} -->
+    <!-- {{ wizard.form.is_election_board|add_class:"usa-radio" }} -->
   </fieldset>
 
   {{ block.super }}  
diff --git a/src/registrar/templates/includes/radio_button.html b/src/registrar/templates/includes/radio_button.html
index 8f43547dd..85f64b831 100644
--- a/src/registrar/templates/includes/radio_button.html
+++ b/src/registrar/templates/includes/radio_button.html
@@ -1,14 +1,14 @@
-<div>
-  <label for="{{ choice.id_for_label }}"
-    ><input
+<div class="usa-radio">
+  <input
     type="{{ choice.data.type }}"
     name="{{ choice.data.name }}"
     value="{{ choice.data.value }}"
-    class="usa-radio"
+    class="usa-radio__input {% if tile %}usa-radio__input--tile {%endif%}"
     id="{{ choice.id_for_label }}"
     {% if choice.data.attrs.required %}required{% endif %}
     {% if choice.data.selected %}checked{% endif %}
     />
-    {{ choice.data.label }}</label
-  >
-</div>
\ No newline at end of file
+    <label class="usa-radio__label" for="{{ choice.id_for_label }}" >
+      {{ choice.data.label }}
+    </label >
+</div>