Merge pull request #4539 from alphagov/remove-app-b-class-names

Remove `app-b` prefixes from all components
alphagov · Dec 19, 2024 · 0dc2a2a · 0dc2a2a
2 parents 670f441 + 393e806
commit 0dc2a2a
Show file tree

Hide file tree

Showing 18 changed files with 116 additions and 116 deletions.
diff --git a/app/assets/javascripts/modules/app-b-main-navigation.js b/app/assets/javascripts/modules/app-b-main-navigation.js
diff --git a/app/assets/javascripts/modules/main-navigation.js b/app/assets/javascripts/modules/main-navigation.js
@@ -0,0 +1,27 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  'use strict'
+
+  function MainNavigation (module) {
+    this.module = module
+    this.module.button = this.module.querySelector('button')
+    this.module.navContainer = this.module.querySelector('.js-main-nav__nav-container')
+    this.module.buttonContainer = this.module.querySelector('.js-main-nav__button-container')
+    this.module.button.classList.remove('main-nav__button--no-js')
+  }
+
+  MainNavigation.prototype.init = function () {
+    this.module.button.addEventListener('click', this.toggleMenu.bind(this))
+  }
+
+  MainNavigation.prototype.toggleMenu = function () {
+    var ariaExpanded = this.module.button.getAttribute('aria-expanded') === 'true'
+    this.module.navContainer.classList.toggle('main-nav__nav-container--js-hidden')
+    this.module.button.setAttribute('aria-expanded', `${!ariaExpanded}`)
+    this.module.buttonContainer.classList.toggle('main-nav__button-container--collapsed')
+  }
+
+  Modules.MainNavigation = MainNavigation
+})(window.GOVUK.Modules)
diff --git a/app/assets/stylesheets/views/_landing_page/block-error.scss b/app/assets/stylesheets/views/_landing_page/block-error.scss
@@ -1,6 +1,6 @@
 @import "govuk_publishing_components/govuk_frontend_support";
 
-.app-b-block-error {
+.block-error {
   padding: govuk-spacing(3);
   border: $govuk-border-width-narrow solid $govuk-error-colour;
   @include govuk-responsive-margin(8, "bottom");

diff --git a/app/assets/stylesheets/views/_landing_page/box.scss b/app/assets/stylesheets/views/_landing_page/box.scss
@@ -1,6 +1,6 @@
 @import "govuk_publishing_components/individual_component_support";
 
-.app-b-box {
+.box {
   padding: govuk-spacing(4);
   background-color: govuk-colour("light-grey");
 
@@ -10,7 +10,7 @@
 }
 
 @include govuk-media-query($media-type: print) {
-  .app-b-box {
+  .box {
     background: none;
     border-top: 2pt solid $govuk-print-text-colour;
     padding-inline: 0;

diff --git a/app/assets/stylesheets/views/_landing_page/card.scss b/app/assets/stylesheets/views/_landing_page/card.scss
@@ -1,6 +1,6 @@
 @import "govuk_publishing_components/individual_component_support";
 
-.app-b-card {
+.card {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -13,26 +13,26 @@
   }
 }
 
-.app-b-card__textbox {
+.card__textbox {
   padding: govuk-spacing(4) 0;
 }
 
-.app-b-card__figure {
+.card__figure {
   border-style: solid;
   border-width: 0 1px 1px;
   border-color: govuk-colour("mid-grey");
   margin: auto 0 0;
   background-color: govuk-colour("white");
 }
 
-.app-b-card__image {
+.card__image {
   display: block;
   width: 100%;
   margin: 0;
 }
 
 @include govuk-media-query($media-type: print) {
-  .app-b-card {
+  .card {
     background: none;
     padding: 0;
 

diff --git a/app/assets/stylesheets/views/_landing_page/columns_layout.scss b/app/assets/stylesheets/views/_landing_page/columns_layout.scss
@@ -1,6 +1,6 @@
 @import "govuk_publishing_components/individual_component_support";
 
-.app-b-columns-layout {
+.columns-layout {
   display: grid;
   grid-gap: govuk-spacing(6);
 
@@ -14,7 +14,7 @@
 
 }
 @include govuk-media-query($media-type: print) {
-  .app-b-columns-layout  {
+  .columns-layout  {
     display: block;
 
     > * {

diff --git a/app/assets/stylesheets/views/_landing_page/hero.scss b/app/assets/stylesheets/views/_landing_page/hero.scss
@@ -3,7 +3,7 @@
 $desktop-height: 400px;
 $large-desktop-height: 500px;
 
-.app-b-hero__imagewrapper {
+.hero__imagewrapper {
   position: relative;
   display: flex;
   justify-content: center;
@@ -18,18 +18,18 @@ $large-desktop-height: 500px;
   }
 }
 
-.app-b-hero {
+.hero {
   position: relative;
 }
 
-.app-b-hero__image {
+.hero__image {
   @include govuk-media-query($until: desktop) {
     aspect-ratio: 4/3 auto;
     width: 100%;
   }
 }
 
-.app-b-hero__textbox {
+.hero__textbox {
   position: relative;
   min-height: 170px;
   padding: govuk-spacing(6);
@@ -43,15 +43,15 @@ $large-desktop-height: 500px;
   }
 }
 
-.app-b-hero--middle_left {
+.hero--middle_left {
   overflow: hidden;
 
   @include govuk-media-query($until: desktop) {
     display: flex;
     flex-direction: column-reverse;
   }
 
-  .app-b-hero__textbox-wrapper {
+  .hero__textbox-wrapper {
     @include govuk-media-query($from: desktop) {
       box-sizing: border-box;
       align-items: center;
@@ -66,7 +66,7 @@ $large-desktop-height: 500px;
     }
   }
 
-  .app-b-hero__textbox {
+  .hero__textbox {
     margin-top: 0;
 
     @include govuk-media-query($until: desktop) {

diff --git a/app/assets/stylesheets/views/_landing_page/main-navigation.scss b/app/assets/stylesheets/views/_landing_page/main-navigation.scss
@@ -4,21 +4,21 @@
   margin-bottom: 0;
 }
 
-.app-b-main-nav {
+.main-nav {
   border-bottom: 1px solid $govuk-border-colour;
   @include govuk-font(19);
 }
 
-.app-b-main-nav__button-container {
+.main-nav__button-container {
   background-color: govuk-colour("light-grey");
   border-bottom: 1px solid govuk-colour("mid-grey");
 }
 
-.app-b-main-nav__button-container--collapsed {
+.main-nav__button-container--collapsed {
   border-bottom: 0;
 }
 
-.app-b-main-nav__button {
+.main-nav__button {
   height: 70px;
   color: govuk-colour("blue");
   background: none;
@@ -36,7 +36,7 @@
 }
 
 // Shared styles for the expanded and collapsed arrow icon. Based off of the super navigation menu button.
-.app-b-main-nav__button::before {
+.main-nav__button::before {
   border-bottom: 2px solid govuk-colour("blue");
   border-right: 2px solid govuk-colour("blue");
   content: "";
@@ -47,24 +47,24 @@
   width: 8px;
 }
 
-.app-b-main-nav__button:focus {
+.main-nav__button:focus {
   border-color: $govuk-focus-colour;
   box-shadow: 0 0, 0 4px govuk-colour("black");
   z-index: 999; // Prevents focus style black bottom border being obscured
 
-  &.app-b-main-nav__button::before {
+  &.main-nav__button::before {
     border-color: govuk-colour("black");
   }
 }
 
-.app-b-main-nav__button[aria-expanded="false"]::before {
+.main-nav__button[aria-expanded="false"]::before {
   // Collapsed arrow icon
   -webkit-transform: translateY(-35%) rotate(45deg) scale(1);
   -ms-transform: translateY(-35%) rotate(45deg) scale(1);
   transform: translateY(-35%) rotate(45deg) scale(1);
 }
 
-.app-b-main-nav__button[aria-expanded="true"] {
+.main-nav__button[aria-expanded="true"] {
   border-color: govuk-colour("mid-grey");
   background-color: govuk-colour("white");
 
@@ -73,20 +73,20 @@
   }
 
   // Expanded arrow icon
-  &.app-b-main-nav__button::before {
+  &.main-nav__button::before {
     -webkit-transform: translateY(1px) rotate(225deg) scale(1);
     -ms-transform: translateY(1px) rotate(225deg) scale(1);
     transform: translateY(1px) rotate(225deg) scale(1);
   }
 }
 
-.app-b-main-nav__button[aria-expanded="true"]:focus {
+.main-nav__button[aria-expanded="true"]:focus {
   background-color: $govuk-focus-colour;
   border-color: $govuk-focus-colour;
 }
 
 // Adds a white border at the bottom of the button when the button is expanded. Used to make the button look like a tab that's seamlessly connected to element below it.
-.app-b-main-nav__button[aria-expanded="true"]::after {
+.main-nav__button[aria-expanded="true"]::after {
   content: "";
   position: absolute;
   border-bottom: 1px solid govuk-colour("white");
@@ -96,34 +96,34 @@
 }
 
 // Removes the white border on bottom of button when focus styles are active.
-.app-b-main-nav__button[aria-expanded="true"]:focus::after {
+.main-nav__button[aria-expanded="true"]:focus::after {
   border: 0;
 }
 
-.app-b-main-nav__button--no-js {
+.main-nav__button--no-js {
   display: none;
 }
 
-.app-b-main-nav__button:hover::before {
+.main-nav__button:hover::before {
   border-color: govuk-colour("dark-blue");
 }
 
-.app-b-main-nav__nav-container {
+.main-nav__nav-container {
   margin-top: govuk-spacing(7);
   margin-bottom: govuk-spacing(9);
 }
 
 .js-enabled {
-  .app-b-main-nav__nav-container--js-hidden {
+  .main-nav__nav-container--js-hidden {
     display: none;
   }
 }
 
-.app-b-main-nav__heading {
+.main-nav__heading {
   margin-bottom: govuk-spacing(2);
 }
 
-.app-b-main-nav__list {
+.main-nav__list {
   padding-left: 0;
   margin-top: 0;
   display: grid;
@@ -139,7 +139,7 @@
   }
 }
 
-.app-b-main-nav__list-item {
+.main-nav__list-item {
   list-style: none;
   @include govuk-media-query($until: mobile) {
     margin-top: govuk-spacing(3);

diff --git a/app/assets/stylesheets/views/_landing_page/quote.scss b/app/assets/stylesheets/views/_landing_page/quote.scss
@@ -1,19 +1,19 @@
 @import "govuk_publishing_components/individual_component_support";
 
-.app-b-quote__svg {
+.quote__svg {
   margin-bottom: govuk-spacing(4);
 }
 
-.app-b-quote__blockquote {
+.quote__blockquote {
   margin: 0;
 }
 
-.app-b-quote__text {
+.quote__text {
   margin: 0 0 govuk-spacing(8);
   @include govuk-font(19, $weight: "regular", $tabular: false, $line-height: false);
 }
 
-.app-b-quote__cite {
+.quote__cite {
   font-style: normal;
   @include govuk-font(19, $weight: "regular", $tabular: false, $line-height: false);
 }
diff --git a/app/views/landing_page/blocks/_block_error.html.erb b/app/views/landing_page/blocks/_block_error.html.erb
@@ -2,7 +2,7 @@
   <%
     add_view_stylesheet("landing_page/block-error")
   %>
-  <div class="app-b-block-error">
+  <div class="block-error">
     <%= render "govuk_publishing_components/components/heading", {
       text: block.error.message,
       heading_level: 3,

diff --git a/app/views/landing_page/blocks/_box.html.erb b/app/views/landing_page/blocks/_box.html.erb
@@ -1,7 +1,7 @@
 <%
   add_view_stylesheet("landing_page/box")
 %>
-<div class="app-b-box <%= "border-top--#{style(block.data["theme_colour"])}" %>">
+<div class="box <%= "border-top--#{style(block.data["theme_colour"])}" %>">
   <%= render "govuk_publishing_components/components/heading", {
     text: govuk_styled_link(block.content, path: block.href),
     heading_level: 2,

diff --git a/app/views/landing_page/blocks/_card.html.erb b/app/views/landing_page/blocks/_card.html.erb
@@ -1,8 +1,8 @@
 <%
   add_view_stylesheet("landing_page/card")
 %>
-<div class="app-b-card <%= "border-top--#{style(block.data["theme_colour"])}" %>">
-  <div class="app-b-card__textbox">
+<div class="card <%= "border-top--#{style(block.data["theme_colour"])}" %>">
+  <div class="card__textbox">
     <%= render "govuk_publishing_components/components/heading", {
       text: govuk_styled_link(block.content, path: block.href),
       heading_level: 2,
@@ -18,8 +18,8 @@
   <% end %>
 
   <% if block.image %>
-    <figure class="app-b-card__figure">
-      <%= image_tag(block.image.source, alt: block.image.alt, class: "app-b-card__image") %>
+    <figure class="card__figure">
+      <%= image_tag(block.image.source, alt: block.image.alt, class: "card__image") %>
     </figure>
   <% end %>
 </div>