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.
mysociety · Jan 13, 2025 · 2a0ea75 · 2a0ea75
1 parent 32bd74d
commit 2a0ea75
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 27 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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>