CSS Class rename to fit TWFY

- Improved naming for keyword alert list(New name is more self explanatory) - New classes use BEM convention
mysociety · Dec 17, 2024 · 14303dd · 14303dd
1 parent f876fcc
commit 14303dd
Show file tree

Hide file tree

Showing 10 changed files with 643 additions and 687 deletions.
diff --git a/www/docs/js/main.js b/www/docs/js/main.js
@@ -483,7 +483,7 @@ function createAccordion(triggerSelector, contentSelector) {
 
 // Initialize accordion when DOM is loaded
 document.addEventListener('DOMContentLoaded', function() {
-  createAccordion('.accordion-button', '.accordion-content');
+  createAccordion('.js-accordion-button', '.js-accordion-content');
 });
 
 // Comfirm deletion of alerts

diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss
@@ -246,6 +246,7 @@ form {
 @import "parts/panels";
 @import "parts/promo-banner";
 @import "parts/accordion";
+@import "parts/labels";
 
 @import "pages/mp";
 @import "pages/topics";

diff --git a/www/docs/style/sass/pages/_alert.scss b/www/docs/style/sass/pages/_alert.scss
@@ -406,3 +406,96 @@
         margin-left: 0.5em;
     }
 }
+
+.alert-section__page-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+
+  button, h2 {
+      margin-bottom: 0;
+      margin-top: 0;
+  }
+}
+
+.alert-meta {
+  .alert-meta__results {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: 1rem;
+      row-gap: 1rem;
+      align-items: center;
+      margin-bottom: 1rem;
+
+      .alert-meta__item {
+          border-radius: 0.5rem;
+          background-color: $primary-color-200;
+          padding: 1rem;
+
+          dt { 
+              font-size: 0.7rem;
+              text-transform: uppercase;
+              margin-bottom: 0;
+          }
+
+          dd {
+              margin-bottom: 0;
+              font-size: 1.1rem;
+          }
+      }
+  }
+}
+
+// Accordion Keyword
+.keyword-alert-accordion {
+  margin-top: 2rem;
+}
+
+.keyword-alert-accordion__button {
+  @extend .accordion__button;
+}
+
+.keyword-alert-accordion__content {
+  @extend .accordion__content;
+}
+
+.keyword-alert-accordion__button-content {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: start;
+  gap: 0.25rem;
+
+  .keyword-alert-accordion__subtitle {
+      font-size: 0.75rem;
+      font-weight: bold;
+  }
+}
+
+.keyword-alert-accordion__keyword-list,
+.alert-creation-steps {
+  margin-bottom: 2.5rem;
+  ul {
+      list-style: none;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-left: 0;
+
+      li {
+          font-weight: bold;
+          i {
+              margin-left: 0.25rem;
+          }
+      }
+  }
+
+  h3 {
+    font-weight: 400;
+  }
+}
diff --git a/www/docs/style/sass/parts/_accordion.scss b/www/docs/style/sass/parts/_accordion.scss
@@ -1,49 +1,4 @@
-.alert-page-header {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-
-    button, h2 {
-        margin-bottom: 0;
-        margin-top: 0;
-    }
-
-    .alert-page-header__button-group {
-        display: flex;
-        flex-direction: row;
-        gap: 0.5rem;
-        input {
-            margin-bottom: 0;
-        }
-    }
-}
-
-.accordion {
-    margin-top: 2rem;
-
-    .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;
-        }
-    }
-}
-
-.accordion-button {
+.accordion__button {
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -69,133 +24,31 @@
             transform: rotate(45deg);
         }
     }
-
-}
-
-.accordion-button--content {
-    display: flex;
-    flex-direction: row;
-    align-content: center;
-    align-items: center;
-    gap: 0.75rem;
-
-    .content-subtitle {
-        @extend .label;
-    }
 }
 
-.accordion-content {
+.accordion__content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
     padding-left: 1rem;
 
-    .alert-controller-wrapper {
-        margin-bottom: 2rem;
-        form {
-            display: inline;
-        }
-
-        button {
-            margin-bottom: 0;
-            span {
-                margin-right: 0.2rem;
-            }
-        }
-
-        button.alert {
-            background-color: $color-red;
-            color: #fff;
-        }
-    }
-
-    .add-remove-tool {
-        display: flex;
-        flex-direction: row;
-
-        input {
-            margin: 0;
-            height: 40px;
-        }
+}
 
-        button {
-            max-width: 100px;
-            height: 40px;
-        }
-    }
 
-    label {
-        font-size: inherit;
-        color: inherit;
-    }
 
-    select {
-        max-width: 350px;
-    }
-}
 
-.alert-page-alert-controls {
+.alert-page-subsection__controls  {
+    margin-bottom: 2rem;
     form {
         display: inline;
     }
-}
-
-.keyword-list {
-    ul {
-        list-style: none;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        margin-left: 0;
-
-        li {
-            font-weight: bold;
-            i {
-                margin-left: 0.25rem;
-            }
-        }
-
-    }
-}
-
-.heading-with-bold-word {
-    font-weight: 400;
-
-    span {
-        font-weight: bold;
-    }
-}
 
-.alert-meta-info {
-
-    .alert-meta-info-results {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        column-gap: 1rem;
-        row-gap: 1rem;
-        align-items: center;
-        margin-bottom: 1rem;
-
-        .content-header-item {
-            border-radius: 0.5rem;
-            background-color: $primary-color-200;
-            padding: 1rem;
-
-            dt { 
-                font-size: 0.7rem;
-                text-transform: uppercase;
-                margin-bottom: 0;
-            }
-
-            dd {
-                margin-bottom: 0;
-                font-size: 1.1rem;
-            }
+    button {
+        margin-bottom: 0;
+        span {
+            margin-right: 0.2rem;
         }
     }
-
 }
 
 button {

diff --git a/www/docs/style/sass/parts/_labels.scss b/www/docs/style/sass/parts/_labels.scss
@@ -0,0 +1,17 @@
+.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;
+    }
+}