diff --git a/app/assets/javascripts/modules/app-b-main-navigation.js b/app/assets/javascripts/modules/app-b-main-navigation.js deleted file mode 100644 index 0a729c6ded..0000000000 --- a/app/assets/javascripts/modules/app-b-main-navigation.js +++ /dev/null @@ -1,27 +0,0 @@ -window.GOVUK = window.GOVUK || {} -window.GOVUK.Modules = window.GOVUK.Modules || {}; - -(function (Modules) { - 'use strict' - - function AppBMainNavigation (module) { - this.module = module - this.module.button = this.module.querySelector('button') - this.module.navContainer = this.module.querySelector('.js-app-b-main-nav__nav-container') - this.module.buttonContainer = this.module.querySelector('.js-app-b-main-nav__button-container') - this.module.button.classList.remove('app-b-main-nav__button--no-js') - } - - AppBMainNavigation.prototype.init = function () { - this.module.button.addEventListener('click', this.toggleMenu.bind(this)) - } - - AppBMainNavigation.prototype.toggleMenu = function () { - var ariaExpanded = this.module.button.getAttribute('aria-expanded') === 'true' - this.module.navContainer.classList.toggle('app-b-main-nav__nav-container--js-hidden') - this.module.button.setAttribute('aria-expanded', `${!ariaExpanded}`) - this.module.buttonContainer.classList.toggle('app-b-main-nav__button-container--collapsed') - } - - Modules.AppBMainNavigation = AppBMainNavigation -})(window.GOVUK.Modules) diff --git a/app/assets/javascripts/modules/main-navigation.js b/app/assets/javascripts/modules/main-navigation.js new file mode 100644 index 0000000000..79a2b39db7 --- /dev/null +++ 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 index ecd25dd75f..fb34fe1ff8 100644 --- 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 index 78d3e8d039..b9ed3bca08 100644 --- 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 index 04df780280..fe7db1db2f 100644 --- 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,11 +13,11 @@ } } -.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"); @@ -25,14 +25,14 @@ 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 index e38167b504..7394593eb2 100644 --- 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 index 2d70478fd8..ce60ba684e 100644 --- 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,7 +43,7 @@ $large-desktop-height: 500px; } } -.app-b-hero--middle_left { +.hero--middle_left { overflow: hidden; @include govuk-media-query($until: desktop) { @@ -51,7 +51,7 @@ $large-desktop-height: 500px; 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 index 48d40fb450..3e77574cd7 100644 --- 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 index 8df1c7f144..3b1d4072bc 100644 --- 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 index 2584bc0a11..bfc2f8577e 100644 --- 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") %> -
+
<%= 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 index 438b112931..dd6a2b52ae 100644 --- 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") %> -
"> +
"> <%= 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 index 4c43e953aa..58ab112070 100644 --- 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") %> -
"> -
+
"> +
<%= 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 %> -
- <%= image_tag(block.image.source, alt: block.image.alt, class: "app-b-card__image") %> +
+ <%= image_tag(block.image.source, alt: block.image.alt, class: "card__image") %>
<% end %>
diff --git a/app/views/landing_page/blocks/_columns_layout.html.erb b/app/views/landing_page/blocks/_columns_layout.html.erb index b80d0e5abc..3299484a24 100644 --- a/app/views/landing_page/blocks/_columns_layout.html.erb +++ b/app/views/landing_page/blocks/_columns_layout.html.erb @@ -1,7 +1,7 @@ <% add_view_stylesheet("landing_page/columns_layout") %> -
"> +
"> <% block.blocks.each do |child| %> <%= render "landing_page/blocks/#{child.type}", block: child %> <% end %> diff --git a/app/views/landing_page/blocks/_hero.html.erb b/app/views/landing_page/blocks/_hero.html.erb index 684daa6d60..36f6b794e7 100644 --- a/app/views/landing_page/blocks/_hero.html.erb +++ b/app/views/landing_page/blocks/_hero.html.erb @@ -2,27 +2,27 @@ <% add_view_stylesheet("landing_page/hero") - hero_classes = %W[app-b-hero app-b-hero--#{block.theme}] + hero_classes = %W[hero hero--#{block.theme}] grid_class = "govuk-grid-column-two-thirds-from-desktop" grid_class = "govuk-grid-column-one-third-from-desktop" if block.theme == "middle_left" - hero_textbox_classes = %w[app-b-hero__textbox] + hero_textbox_classes = %w[hero__textbox] hero_textbox_classes << "border-top--#{style(block.theme_colour)}" if block.theme_colour image_alt_text = block.image.alt || "" %> <%= content_tag("div", class: hero_classes) do %> - <%= picture_tag(class: "app-b-hero__imagewrapper") do %> + <%= picture_tag(class: "hero__imagewrapper") do %> <%= tag.source srcset: "#{image_path(block.image.sources.desktop)}, #{image_path(block.image.sources.desktop_2x)} 2x", media: "(min-width: 769px)" %> <%= tag.source srcset: "#{image_path(block.image.sources.tablet)}, #{image_path(block.image.sources.tablet_2x)} 2x", media: "(min-width: 641px) and (max-width: 768px)" %> <%= tag.source srcset: "#{image_path(block.image.sources.mobile)}, #{image_path(block.image.sources.mobile_2x)} 2x", media: "(max-width: 640px)" %> - <%= image_tag(block.image.sources.desktop, alt: image_alt_text, class: "app-b-hero__image") %> + <%= image_tag(block.image.sources.desktop, alt: image_alt_text, class: "hero__image") %> <% end %> <% if block.hero_content.present? %> -
+
<%= content_tag("div", class: grid_class) do %> <%= content_tag("div", class: hero_textbox_classes) do %> diff --git a/app/views/landing_page/blocks/_main_navigation.html.erb b/app/views/landing_page/blocks/_main_navigation.html.erb index 15da796f55..ec5b2f5a28 100644 --- a/app/views/landing_page/blocks/_main_navigation.html.erb +++ b/app/views/landing_page/blocks/_main_navigation.html.erb @@ -1,22 +1,22 @@ <% add_view_stylesheet("landing_page/main-navigation") %> -
-

Secondary navigation menu

-
+
+ +
-
-
-