From 2a0ea75e7f8d43b7b0389598bc7ad9a8e2f189ef Mon Sep 17 00:00:00 2001
From: Lucas Cumsille M <hello@lucascm.dev>
Date: Mon, 13 Jan 2025 10:36:46 +0000
Subject: [PATCH] Replaced .label with .tags

It will be less confusing when trying to make future changes. I have also added the BEM classes to the current elements using the tags.
---
 www/docs/style/sass/app.scss                    |  2 +-
 www/docs/style/sass/pages/_alert.scss           | 15 +++++++++++++++
 www/docs/style/sass/parts/_labels.scss          | 17 -----------------
 .../templates/html/alert/_alert_form.php        | 10 +++++-----
 .../html/alert/_keyword_alert_list.php          |  8 ++++----
 5 files changed, 25 insertions(+), 27 deletions(-)
 delete mode 100644 www/docs/style/sass/parts/_labels.scss

diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss
index 9ec3e1a728..23e527efc5 100644
--- a/www/docs/style/sass/app.scss
+++ b/www/docs/style/sass/app.scss
@@ -253,7 +253,7 @@ form {
 @import "parts/panels";
 @import "parts/promo-banner";
 @import "parts/accordion";
-@import "parts/labels";
+@import "parts/tags";
 
 @import "pages/mp";
 @import "pages/topics";
diff --git a/www/docs/style/sass/pages/_alert.scss b/www/docs/style/sass/pages/_alert.scss
index 9572327fcd..cf865b5b35 100644
--- a/www/docs/style/sass/pages/_alert.scss
+++ b/www/docs/style/sass/pages/_alert.scss
@@ -499,3 +499,18 @@
     font-weight: 400;
   }
 }
+
+.keyword-alert-accordion__tag,
+.keyword-list__tag {
+  @extend .tag;
+}
+
+.keyword-alert-accordion__tag--included,
+.keyword-list__tag--included  {
+  @extend .tag--primary-light;
+}
+
+.keyword-alert-accordion__tag--excluded,
+.keyword-list__tag--excluded  {
+  @extend .tag--red;
+}
diff --git a/www/docs/style/sass/parts/_labels.scss b/www/docs/style/sass/parts/_labels.scss
deleted file mode 100644
index a8454744f2..0000000000
--- a/www/docs/style/sass/parts/_labels.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.label {
-    background-color: #fff;
-    color: $primary-color;
-    padding: 0.25rem 0.5rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-
-    &--primary-light {
-        background-color: $primary-color-200;
-        color: $body-font-color;
-    }
-
-    &--red {
-        background-color: lighten($color-red, 40%);
-        color: $body-font-color;
-    }
-}
diff --git a/www/includes/easyparliament/templates/html/alert/_alert_form.php b/www/includes/easyparliament/templates/html/alert/_alert_form.php
index 2a05c6482d..01625b2ced 100644
--- a/www/includes/easyparliament/templates/html/alert/_alert_form.php
+++ b/www/includes/easyparliament/templates/html/alert/_alert_form.php
@@ -139,7 +139,7 @@
                       <ul>
                         <?php foreach ($keywords as $word) {
                             if (!in_array($word, $skip_keyword_terms)) { ?>
-                            <li class="label label--primary-light"><?= _htmlspecialchars($word) ?>
+                            <li class="keyword-list__tag keyword-list__tag--included"><?= _htmlspecialchars($word) ?>
                         <?php }
                             } ?>
                       </ul>
@@ -220,7 +220,7 @@
                       <?php } ?>
                       <ul>
                         <?php foreach ($keywords as $word) { ?>
-                        <li class="label label--primary-light"><?= _htmlspecialchars($word) ?>
+                        <li class="keyword-list__tag keyword-list__tag--included"><?= _htmlspecialchars($word) ?>
                         <?php } ?>
                       </ul>
                     </div>
@@ -230,7 +230,7 @@
                     <h3><?= gettext('Unless the speech also includes these words') ?>:</h3>
                       <ul>
                         <?php foreach (explode(" ", $exclusions) as $word) { ?>
-                        <li class="label label--red"><?= _htmlspecialchars($word) ?>
+                        <li class="keyword-list__tag keyword-list__tag--excluded"><?= _htmlspecialchars($word) ?>
                         <?php } ?>
                       </ul>
                     </div>
@@ -241,7 +241,7 @@
                       <h3><?= gettext('And only if the speech is in') ?>:</h3>
                         <ul>
                         <?php foreach ($sections as $word) { ?>
-                          <li class="label label--primary-light"><?= _htmlspecialchars($word) ?>
+                          <li class="keyword-list__tag keyword-list__tag--included"><?= _htmlspecialchars($word) ?>
                         <?php } ?>
                         </ul>
                     <?php } else { ?>
@@ -254,7 +254,7 @@
                     <h3><?= gettext('And only when spoken by') ?></h3>
                       <ul>
                         <?php foreach ($members as $member) { ?>
-                        <li class="label label--primary-light"><?= $member['given_name'] ?> <?= $member['family_name'] ?>
+                        <li class="keyword-list__tag keyword-list__tag--included"><?= $member['given_name'] ?> <?= $member['family_name'] ?>
                         <?php } ?>
                       </ul>
                     </div>
diff --git a/www/includes/easyparliament/templates/html/alert/_keyword_alert_list.php b/www/includes/easyparliament/templates/html/alert/_keyword_alert_list.php
index 5ac6238f92..7fb75f3046 100644
--- a/www/includes/easyparliament/templates/html/alert/_keyword_alert_list.php
+++ b/www/includes/easyparliament/templates/html/alert/_keyword_alert_list.php
@@ -74,7 +74,7 @@
                             <h3 class="heading-with-bold-word">Keywords <strong>included</strong> in this alert:</h3>
                             <ul>
                               <?php foreach ($alert["keywords"] as $keyword) { ?>
-                                <li class="label label--primary-light"><?= _htmlspecialchars($keyword) ?>
+                                <li class="keyword-alert-accordion__tag keyword-alert-accordion__tag--included"><?= _htmlspecialchars($keyword) ?>
                               <?php } ?>
                             </ul>
                           </div>
@@ -85,7 +85,7 @@
                             <h3 class="heading-with-bold-word">Keywords <strong>excluded</strong> in this alert:</h3>
                             <ul>
                               <?php foreach ($alert["exclusions"] as $exclusion) { ?>
-                                <li class="label label--red"><?= _htmlspecialchars($exclusion) ?>
+                                <li class="keyword-alert-accordion__tag keyword-alert-accordion__tag--excluded"><?= _htmlspecialchars($exclusion) ?>
                               <?php } ?>
                             </ul>
                           </div>
@@ -96,7 +96,7 @@
                             <h3 class="heading-with-bold-word">Which <strong class="bold">section</strong> should this alert apply to:</h3>
                             <ul>
                               <?php foreach ($alert["sections_verbose"] as $section) { ?>
-                                <li class="label label--primary-light"><?= _htmlspecialchars($section) ?>
+                                <li class="keyword-alert-accordion__tag keyword-alert-accordion__tag--included"><?= _htmlspecialchars($section) ?>
                               <?php } ?>
                             </ul>
                           </div>
@@ -107,7 +107,7 @@
                             <h3 class="heading-with-bold-word"><?= gettext('This alert applies to the following <strong class="bold">representative</span>') ?></h3>
                             <ul>
                               <?php foreach ($alert['spokenby'] as $speaker) { ?>
-                                <li class="label label--primary-light"><?= $speaker ?>
+                                <li class="keyword-alert-accordion__tag keyword-alert-accordion__tag--included"><?= $speaker ?>
                               <?php } ?>
                             </ul>
                           </div>